Community Forums › Forums › Archived Forums › Design Tips and Tricks › Header and Header Right Widget – Mobile
Tagged: header right widget mobile
- This topic has 6 replies, 3 voices, and was last updated 8 years, 11 months ago by tlc72.
-
AuthorPosts
-
May 18, 2015 at 10:56 am #152570tlc72Member
Hi,
Thanks to Lauren this morning, I now have a Header Right widget. I put my social sharing buttons in there and styled the widget to where I like it in the header. Yea!Now, when I look at it on my iPhone 6, it looks pretty ugly. I've tried a number of adjustments in the @media area of my CSS. Currently the @media css addresses these two components for the various size screens:
.header-image .site-title aI added: .
site-header .widget-areaThen I tried all kinds of CSS ideas to get the widget and the header image to center. None of it changed... so I'm lost.
While we're on the topic, why does the @media CSS have two end closures? These: }}
I thought I'd clean that up and deleted the double closures and then my website was all wonky, I put the double closures back in and all is right in the desktop world 🙂And lastly, I see everyone often referring to the CSS Line #'s. How do you figure out what the line numbers are?
Thanks!
http://www.troprockin.com
TammyMay 18, 2015 at 6:18 pm #152634Lauren @ OnceCoupledMemberWhy are there two end closures?
One of those is closing the selector, and the other is closing the media query. For example:@media only screen and (max-width: 1139px) { <-- A opening .sidebar-secondary { <-- B opening width: 150px; } <-- B closure } <-- A closure
Where do you see line numbers?
I see line numbers when I few your stylesheet. I use Google Chrome, but there's a good tutorial for using Firebug: http://www.studiopress.com/tips/using-firebug.htmHow to center logo and widget area?
1. Delete the extra end closure before your first media query.
2. Add the following to a media query:.header-image .site-title a { background-position-x: center !important; }
3. Adjust the padding of your widget area in a media query.
Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 19, 2015 at 3:57 pm #152827tlc72MemberThank you for the info on the double closures!
For the CSS Line numbers, you can only see them in Firebug, correct? Meaning, you can't see them in your WordPress CSS Editor? I've always seen them in Firebug... but I still have to flip back and forth between Firebug and the Editor to try and find the right code.
The header image looks fantastic! Thank you!
I still need more of your brilliance....
The Header Right Widget still is way over the left. I tried adding padding under the first media query and nothing changes. I tried these combinations (I"m terrible at figuring anything out with the mobile site):
.header-image .site-header .widget-area
.site-header .widget-area
widget-area header-widget-area
.widget-area.May 19, 2015 at 4:42 pm #152830Lauren @ OnceCoupledMemberIf you upload your style.css via FTP, most file editors will have line numbers.
I'd definitely recommend learning more about how to use Firebug for troubleshooting issues. You're looking for
.site-header .widget-area
. You can test media queries just by resizing your browser window -- you don't need to be on a mobile device.Best,
Lauren
We create mobile-first, PageSpeed-optimized, pixel-perfect custom themes! https://www.oncecoupled.com
May 23, 2015 at 3:44 pm #153440tlc72MemberThe re-sizing browser is a great tip, as I do see it the header changing as I re-size the browser, BUT it doesn't look the same as what is on my mobile devices. The header image does not center as I decrease the browser size in Firefox (no matter how small I make the browser the image pushes left) BUT it does center on my iphone 5 and iphone 6plus. So, the shrinking browser and mobile device do not match.
I originally kept putting the padding changes under the first Media query and there were no results. I now have put it under the Media query for (max-width: 568px) and added padding. This does make changes on the Mobile devices. But I can't get it centered. If I add enough padding to push it to the center, it squishes up and every letter and social media icon turn into a vertical line.
I give up. I'm just going to turn it back into a full width header.
Thanks!May 23, 2015 at 5:14 pm #153446eamonmoriartyParticipantThe default Editor doesn't show line numbers in your css style sheet.
You can install a plugin such as Advanced Code Editor which will show line numbers in the Editor.
Eamon Moriarty
EM DzineMay 23, 2015 at 5:54 pm #153448tlc72MemberThanks Eamon! That's a great tip!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.