EZ Home page widgets WordPress

• SOLVED

Hi Guys

I have set up a home page at http://stevewatsondemos.com/designtrust/
using Genesis and the dynamik website builder.

The home page is made up of widget areas

http://screencast.com/t/DFGEeC2Hd4

The four coloured boxes on the page I have style with css

http://screencast.com/t/OUF4xXiX

But i'm not sure that's the best way to do it when it comes to Responsiveness.

Can anyone show me a better way to achieve the same look but where the boxes reduce in size?

Any help is greatly appreciated.

Thanks
Steve

Answers (2)

2014-04-14

zebra webdesigns answers:

Hello Steve
here is the code which will work for you.
add this at the end of custom css

#ez-home-top-1 .widget.widget_text {
padding: 0px;
width: 25%;
}

#ez-home-top-1 .widget.widget_text .widget-wrap {
padding: 20px;
}
@media all and (max-width:767px){
#ez-home-top-1 .widget.widget_text {
padding: 0px;
width: 50%;
}
}
@media all and (max-width:500px){
#ez-home-top-1 .widget.widget_text {
padding: 0px;
width: 100%;
}


---

zebra webdesigns comments:

if you want you can remove the width and padding from the #text-2 ,#text-6,#text-7,#text-8

and add the code I provided below them. you can adjust the width values as like you need.

I have attached the image to show how it will go responsive