improving Fontfolio's responsive design

kerin2014 · Member · Oct 14, 2014 at 10:19 am
Copy link

Add topic to favorites
currently when viewed on a mobile platform or if a browser is narrowed to a smaller size, the menu options are transformed into the word MENU and placed in the upper right corner of the screen.

unfortunately, the grey line under the menu options then overstrikes the word MENU. this is aesthetically displeasing.

is there a way to prevent this from happening? the offending line in question is
```
.header-wrapper {
	border-bottom: solid #eeeeee;
}
```
what I would like to do is have border-bottom stop just a few pixels short of MENU, when the them is in responsive design mode.

thanks!

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Oct 14, 2014 at 2:33 pm
Copy link
I’m not seeing that on my iPhone, but with the text so light on the mobile menu, I almost can’t see the word or the line below. I might actually miss the menu link if I went to your site. I would suggest making it darker.

On which phone/browser are you seeing the border line issue?
kerin2014 · Member · Oct 14, 2014 at 3:31 pm
Copy link
I am testing on a Galaxy s5 droid browser. I shall make the font darker as you suggested. I was thinking that I could hard code the line to be 80 per cent bigger doing a media query, but ideally what I would like is for the line to end just before the menu — and that its size would be adjusted dynamically, depending on the size of the browser at any given moment. thx for looking into this!
thesacredpath · Member · Oct 14, 2014 at 5:37 pm
Copy link
I’m not finding a simulator for the S5. Let me see if I can find a team mate with one to take a look.
thesacredpath · Member · Oct 14, 2014 at 5:53 pm
Copy link
I was able to emulate an S4 and S2 in Chrome, and both of them show the line below the Menu toggle text.

What browser are you using on your S5? I know there have been issues with the standard Samsung browser.
kerin2014 · Member · Oct 14, 2014 at 6:43 pm
Copy link
in a way, what browser and device is somewhat irrelevant, as you can see the same behavior when you go into the CSS tablet/mobile view, i am always in favor of generalized solutions – blah blah. however, it is not easy to pinpoint how to make the line diminish dynamically, a few pixels away from MENU. i am not even sure if CSS can handle on-the-fly readjustments at this level of accuracy.

so to get to the point, how do you do this?!
kerin2014 · Member · Oct 14, 2014 at 6:53 pm
Copy link
sorry. i was wrong about the irrelevant thing. it seems to be okay when you minimize on a desktop running windows! meaning MENU is above the line in this case, when you minimize the browser. Jeez, i never thought I would know this much about browsers etc!

cheers!
thesacredpath · Member · Oct 14, 2014 at 7:53 pm
Copy link
I’ve not been able to reproduce this in any device, or on any emulator so far, and here is what I see when I click on the mobile view button directly in your customizer: https://cldup.com/IwnuJIz9r3-2000×2000.png , which matches what I see on my iPhone 5S.

Until I can reproduce it, I can’t quite figure out how to fix it. This is just a wild guess on a possible solution. What this does is to take the border out of .header-wrapper and put it on the bottom of .main-navigation instead.
```
@media screen and (max-width: 768px) {
	.header-wrapper {
		border-bottom: none;
	}
	.main-navigation {
		border-bottom: 2px solid #eee;
	}
}
```
kerin2014 · Member · Oct 15, 2014 at 5:29 am
Copy link
thank you!
kerin2014 · Member · Oct 15, 2014 at 5:29 am
Copy link
thank you!

No items found.