Header size in media screen

usinarevista · Member · Oct 18, 2015 at 5:21 pm
Copy link

Add topic to favorites
Hello everyone,

I’m having some trouble setting the CSS for devices other than computer. My website doesn’t work properly in small media screen. In cellphones, for instance, it’s completely messed up, the posts are displayed in the home page with full content.

Right now I’m looking for some help to fix the size of the header in iPads and other similar-sized tablets. The web page looks kind of fine, almost like in the computer. But the header is really small, about 1/3 of the size it should be… Does anyone know how to fix that?

I use the Sight Theme by the way.

Thanks a lot!

The blog I need help with is: (visible only to logged in users)
usinarevista · Member · Oct 19, 2015 at 8:30 pm
Copy link
Hey guys, does anyone know?
thistimethisspace · Member · Oct 19, 2015 at 8:35 pm
Copy link
You will receive Staff support as soon as they work their way forward to this thread.
ehtis · Staff · Oct 20, 2015 at 1:28 pm
Copy link
There is a lot of customized CSS code in there, many media queries as well so some of it might be affecting layouts across screen sizes.

As for the header image on tablets, it was being affected by a max-width: 890px media query, where its width was set to 40%; changing it to 100% fixes it. Here’s the code, add it at the bottom:
```
@media only screen and (max-width: 890px) {
.site-header hgroup {
    max-width: 100%;
    }
}
```
P.S. Here’s a small nifty guide on CSS, can help you in getting familiar with the customizations. :)
usinarevista · Member · Oct 21, 2015 at 12:44 am
Copy link
Thanks a lot! That worked :-) I’ll study the guide. As you’ve noticed, the whole website was made by trial and error.
ehtis · Staff · Oct 21, 2015 at 6:19 am
Copy link
You’re welcome! Trial and error is how we all learn. :)

No items found.