The responsiveness is making my homepage display weird. When I pull up my website on a 13inch screen with my Mac it shows like this. Is there a way through CSS where the next size down the blue boxes on my site at least go from a 4 to 2 to 1 column? Instead of 4 to 3 to 2 to 1? The mobile and desktop version is fine. But with a tablet and small laptops/notebooks it looks weird. Take a look at the pic and check out the live link. Please help, thank you so much. Also is there a way that I can make the white box with the green boarder go centered with the screen only when the screen is sized down to the size of the screenshot I showed you? If i give it the center attribute then it’s all out of wack.
I hope you are well today and thanks for posting on the forum.
To achieve the above mentioned functionality try using the following listed respective CSS code in the Custom CSS theme option of Unite theme on the following path.
Admin Area -> Appearance -> Theme Options -> Other Tab -> Custom CSS
Is there a way through CSS where the next size down the blue boxes on my site at least go from a 4 to 2 to 1 column? Instead of 4 to 3 to 2 to 1?
```
body.home #main .entry-content > p > a > img{
max-width: 25%;
}
@media only screen and (min-width : 990px) and (max-width : 1200px) {
body.home #main .entry-content > p > a > img{
max-width: 24%;
}
}
<blockquote> Also is there a way that I can make the white box with the green boarder go centered with the screen only when the screen is sized down to the size of the screenshot I showed you?</blockquote>
@media only screen and (max-width : 1200px) {
div#home-box {
width: 400px;
margin: 20px auto 0px;
float: none;
}
Thank you so much for your help. The second code worked, but for some reason when I add the first code you provided me, it comes out like this ( the “>” turns into “>” after saving and won’t work):
body.home #main .entry-content > p > a > img{
max-width: 25%;
}
@media only screen and (min-width : 990px) and (max-width : 1200px) {
body.home #main .entry-content > p > a > img{
max-width: 24%;
}
}
Also, with the second code you gave me when I go on a mobile phone the box image is to large for the screen and is overlapping. It seems the image is not being responsive now.
The above issue will be fixed shortly, in the meanwhile you can try adding the provided CSS code in your child theme or adding it in your site using the following plugin.