Wanderers tweaking issues (A responsive inconsistency and a footer challenge)
By Jannik L. on Thursday, 16 October 2014
Posted in Wanderers
Replies 12
Likes 0
Views 1.3K
Votes 0
Hey guys, I am working with Wanderers on my site, and I absolutely love it, so once again thank you for sharing such a great and lean template with us for free!

Now I have been able to modify it quite a bit with a lot of success using the custom.css... however, I just noticed today that there are two responsive inconsistencies on Firefox for Mac that arent found in Chrome for Mac.

Note: As I have customized things, I understand if you cannot help me. However, I would appreciate if both Stackideas designers and Community members could take a min to look at my site and see if they can spot an obvious css issue or something.

Basically on Firefox for Mac I cannot resize the Window down all the way, at a certain point is just gives a horizontal scroll instead. Also, the footer is compressed to the left, rather than being centered and full width..

The footer issue happened when I tried to add this:

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 90%;
}

The resizing/responsive issue happened out of the blue. I am inclined to think that it is related to a module or plugin, rather than a css tweak... as I just noticed the issue an hour ago and it has been working fine for weeks. However, I could be wrong.

I attached screenshots of both chrome and firefox so that you can see the inconsistencies.

Note: URL is http://statusselect.com (Ignore the shitty frontpage which is under construction... although if you have good design tips on how to organize the frontpage, or how to setup a nice colorscheme, feel free to share)
Hello Jannik,

Sorry for a late reply. Its great to know you are happy using Wanderers.

According to the inconsistencies issue you report before, i figure out that its happen in all browser due to the inline styling you use in all header (<h3> and <h5>) in that page. (refer screenshot : inconsistence.png)
As you inspect the code, you can see the inline styling :



    <h3 style="margin-left: 40px; text-align: center;">Community driven Blogging</h3>


With that inline styling ( style="margin-left: 40px; text-align: center;") will cause the <h3> being push to 40px from the left side.
I know you want it to be like that on desktop view, but it will make it defective on responsive view.
I would suggest you to use separate styling (using custom.css) then use media queries css (add/use @media in custom.css) to control the styling in responsive view.

For "resizing" issue on Firefox for Mac, i find its all ok here (refer screenshot : resizing.png), its work like a charm. but if u click you search filter dropdown (refer screenshot : searchfilter.png) that resizing issue will appear along with the "horizontal" scrollbar the bottom of the page when you try to resizing the browser (refer screenshot : scrollbar1.png and scrollbar2.png). Your search filter dropdown may trigger something that defective the resposive view.

For footer issue, i found that there was a missing wanderers default styling on your site (refer screenshot : defaultstyling.png). i suggest you to checkback or you can just add this media queries css to your custom.css



@media (max-width: 991px)

    .theme-footer .col-lg-3 {

    display: block;

}


Hope this would help you a little bit.Happy Wanderers-ing
Ridhwan Razak
·
Thursday, 16 October 2014 16:54
·
0 Likes
·
0 Votes
·
0 Comments
·
Ah thanks a lot! Hmm, I still dont understand how to fix the footer. I added:

@media (max-width: 991px)
.theme-footer .col-lg-3 {
display: block;
}

to my custom.css but it did not fix it? do I have to do anything else (Not the issue with the footer is on desktop on firefox)
Jannik L.
·
Thursday, 16 October 2014 17:14
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Jannik,

I'm so sorry for my previous reply, there is few missing code on the CSS that I shared to you just now, it should be like this:

@media (max-width: 991px) {

	.theme-footer .col-lg-3 {

		display: block;

	} 	

}
Ridhwan Razak
·
Thursday, 16 October 2014 17:49
·
0 Likes
·
0 Votes
·
0 Comments
·
hmm, it still hasnt fixed it. I even tried adding !important, and it hasnt fixed it. I have disabled my CDN, cleared cache etc. still no luck.
Jannik L.
·
Thursday, 16 October 2014 17:55
·
0 Likes
·
0 Votes
·
0 Comments
·
Hello Jannik,

I'm sorry for this delayed respond.

I already updated your custom.css code, the CSS code is as below:
@media (max-width: 991px) {

	.theme-footer .row,

	.theme-footer .col-lg-3 {

		display: block !important;

	} 	

}


And also I noticed that our modules structure for footer section is also a mess, I will let our developer to update it.

Hope this will help, thank you.
Ikram Hakimi
·
Thursday, 16 October 2014 18:28
·
0 Likes
·
0 Votes
·
0 Comments
·
Thank you, that fixed the responsive, but the layout width and alignment are still off on Firefox. Is that what you are referring to when you say:
And also I noticed that our modules structure for footer section is also a mess, I will let our developer to update it.

?
Jannik L.
·
Friday, 17 October 2014 09:37
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Jannik,

I already updated your template some more. This should remove the extra lines at the footer.

I already inspected your site via Firefox and it looks just fine. Can you share with us a few screenshots that pointed to this layout width and alignment on Firefox?

Please advice, thank you.
Ikram Hakimi
·
Monday, 20 October 2014 10:02
·
0 Likes
·
0 Votes
·
0 Comments
·
Thanks a lot Ikram, the last tweaks fixed the alignment issues I had before!
Jannik L.
·
Monday, 20 October 2014 10:13
·
0 Likes
·
0 Votes
·
0 Comments
·
Nevermind I spoke to early. On Chrome it is full width based on window size... on Firefox it is much more compressed and aligned left, rather than being full width and taking up the full footer.
Jannik L.
·
Monday, 20 October 2014 10:23
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Jannik,

Sorry for missed out on that. I already updated your custom.css to fix this issue as below and already asked the designer team to update the styling. 

.theme-footer .row {

	display: block !important;

}



.theme-footer .col-lg-3 {

	float: left !important; 

}

The looks already good on my side, please let us know if you need further assistance.
Ikram Hakimi
·
Monday, 20 October 2014 12:11
·
0 Likes
·
0 Votes
·
0 Comments
·
Ah fantastic, thanks a lot!
Jannik L.
·
Monday, 20 October 2014 12:43
·
0 Likes
·
0 Votes
·
0 Comments
·
Hi Jannik,

Glad your issues resolved here, thank you very much for reporting those issues, it really help us to improve this themes.

Please let us know if you need further assistance with the theme in the future. Cheers!
Ikram Hakimi
·
Monday, 20 October 2014 13:11
·
0 Likes
·
0 Votes
·
0 Comments
·
View Full Post