Metro Pro – header right widget

[Lise]

Hi there,

I looked everywhere and tried all kinds of css and nothing seems to work.

temporary site is: http://192.185.48.167/~nyawira/

All is great on desktop.

When I look at it on my iphone, the simple social icons have too much white space under it. Using firebug, it looks like it's the margin-bottom of widget that adds that much space, but I can't seem to find css that will affect it.

Thanks anyone
Lise

[Brad Dalton]

Maybe there isn't so you would need to write some using the class for the icons or widget which you can get using Firebug. http://www.w3schools.com/css/css_mediatypes.asp

---

Tutorials for StudioPress Themes.

[Lise]

Thanks Brad, but that's what I did, I tried adding in the @media queries

.site-header .widget-area

or

.simple-social-icons

Ok then I'm going to see the demo and look at it on my cell.

thanks

[Lise]

Well Brad, thanks for the idea.

For anyone having the same problem, here is how I fixed it:

I looked further into the div being used and saw that it was an id, so I added this code to the media queries in the section for max-width: 320px

#simple-social-icons-2 {
float: none;
margin-bottom: 0;
margin-top:-30px;
margin-left: -30%;
width:100%;
}

I gave a negative top margin and I wanted to center the icons so added a negative margin-left

Hope this helps.
🙂

[Brad Dalton]

Or you could use:

.header-widget-area

---

Tutorials for StudioPress Themes.

[Author]

Posts