Making social bar width responsive

Something like this for child themes in your header.php modification in the social wrapper container:

<div id="st-socialbar-wrapper">
<img src="<?php echo get_stylesheet_directory_uri() ; ?>/images/image.jpg" alt="wave graphic" />
</div>

This is of course providing you don’t plan on using the theme’s social icons. Also make sure you make a copy of your theme before making changes in case you have to go back.

No, not planning to use the social icons there. I’ve modified the header as you suggested but am only getting the ‘wave graphic’ alternate text. I thought at first it was because I was using a png file and your example is a jpg, but have now uploaded a jpg as well and still the same problem. Would you mind having another look with your expert eye?

I also noticed before that on the mobile version I still got a top and bottom line on the graphic (the way I had it before). Not sure if this will have the same problem. Maybe there is another border I need to set to 0px for the mobile version somewhere?

Thanks again.

Then what you can do is upload your image somewhere then between the src=” ” add the full url to the image. You can make your image a png or jpg, up to you.

Brilliant! Now if I could get the 4 big buttons to shrink according to browser window size as well that would be great. They look nice on my 7″tablet, but if I shrink a normal browser window down the right hand ones disappear.

For your 4 big buttons, I will have to leave that one for you…as much as I would love to help you keep building and customizing your website, I need to keep things to “theme” support as best as I can ??

…but, you seem to be doing quite well up to this point. As for your 4 big buttons, they shrink for me as I resize my window and don’t see a loss of any.

Yes, that’s fine. Thanks for all your help. Much appreciated.
Interestingly the buttons re-size fine in Google Chrome but not in Firefox. Haven’t tried any other browsers. What are you using?

No worries… for me I use Google Chrome as my primary one, then use Firefox, ie10, safari (windows), and then Opera.

I just checked your site in Firefox, you’re right, they don’t change. If you’re using the Front Page Widgets only template for your home, then add each circle image to a text widget, the first for the Front Top 1 position, the second for Front Top 2, etc. Just load the image tag (with path) only. For titles on your widgets, to disable them, use a plugin called Remove Widget Titles and when active, in front of any Widget Title in the field, add an ! in front like this:

!This Hides My Title

Thanks, I’ll try that tomorrow.
I’ll mark this resolved now.
Cheers.