Responsive Custom Widgets CSS

[Brain-e]

I am trying to make the the Welcome text and Social Icons on my site be responsive in a certain way.

from looking at the http://www.studiopress.com/responsive/ link

I want the Social widgets and Text to centralise with the Social widgets moving under the text specifically when the social widgets get to the 80 x 640 (small tablet) size.

Not sure if that totally makes sense but hay...

http://www.neuroknowhow.com/brain

[sangfroidweb]

Hi! There are a few parts to this, but this should work.

First, on the .social-icons div, make the 'float:none' and set the margin to '0px auto' to center the div.

Line 2741

.social-icons {
float: none;
height: auto;
margin: 0 auto;
overflow: auto;
padding: 10px;
width: 240px;
}

Then on the actual ul, remove the float, align the text center, and change the margin to center the ul. You should add this rule in the appropriate Mobile Responsive section overwriting what is happening at line 23.

body .simple-social-icons ul {
display: block;
float: none;
margin: 0 auto;
padding: 0;
text-align:center;
}

Then on the individual li's, remove the float, change the display to inline-block. You should add this in the appropriate Mobile Responsive section overwriting what is happening at line 28.

body .simple-social-icons ul li {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
display: inline-block;
    float: none;
list-style-type: none !important;
margin: 0 6px 12px !important;
padding: 0 !important;
}

On the welcome-text, remove the float and change the margin to center.

Line 2730

.welcome-text {
float: none;
font-family: inherit;
font-size: 14px;
margin: 0 auto;
min-width: 240px;
overflow: auto;
padding: 10px;
width: 70%;
}

Give it a try and let me know if it doesn't quite work, and I'll take another look.
🙂
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Brain-e]

Cheers for this...

the following which I assume you view via firebug  on line 23 and then 28 are automatically created,

body .simple-social-icons ul {
display: block;
float: none;
margin: 0 auto;
padding: 0;
text-align:center;
}

body .simple-social-icons ul li {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
display: inline-block;
    float: none;
list-style-type: none !important;
margin: 0 6px 12px !important;
padding: 0 !important;
}

not sure how I would do these edits on the actual theme's css

do you have the wisdom?

[sangfroidweb]

Hi!

So, I see those lines (23 and 28) are actually in the stylesheet for the Social Icons plugin. Since we can't reliably edit that stylesheet (our changes would be overwritten with an update to the plugin), we instead write a CSS rule in our stylesheet that has more specificity and will therefore supercede the other. You can do this by adding extra selectors which is why we are adding 'body' in front of the rule. It tells the browser that we are talking about something more specific than the other stylesheet is, and to follow our rule instead.

It looks like you have got some of this working, but I wanted to point out that you should add these mobile responsive CSS rules in the  section of the stylesheet for screens less than 768 pixels (between lines 2220 and 2288) so that these changes only display on that size screen.

Also, I would add any global rules you are adding to the stylesheet above the Mobile Responsive section of the stylesheet instead of at the end of the stylesheet where they can potentially supercede the Mobile Responsive rules.

So, starting from where you are now......

Currently on line 176 -- move this block to the Mobile Responsive section for screens less than 768 pixels ( This section is between lines 2220 and 2288) so that these changes only display on that size screen. Right now, this rule is being applied at all size screens, and we only want it to happen on the <768 size.

body .simple-social-icons ul {
display: block;
float: none;
margin: 0 auto;
padding: 0;
text-align: center;
}

Currently on line 184 -- also move this block to the Mobile Responsive section for screens less than 768 pixels (between lines 2220 and 2288) so that these changes only display on that size screen.

body .simple-social-icons ul li {
background: none repeat scroll 0 0 transparent !important;
border: medium none !important;
display: inline-block;
float: none;
list-style-type: none !important;
margin: 0 6px 12px !important;
padding: 0 !important;
}

And it looks like you are almost there with the welcome text -- add this block to the Mobile Responsive section for screens less than 768 pixels (between lines 2220 and 2288) so that these changes only display on that size screen.

body .welcome-text {
float: none;
margin:0px auto;
}

Let me know how it goes. 🙂

Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Author]

Posts