Css adjustments

[johnaps]

Hello!

Can i implement any css to make the page container smaller for better visibility when viewport’s height is lets say under 700px…?

I havent found exactly in what height and under are best to apply these rules.
I just stumbled upon my site navigating it through an oldish kinda laptop and it was hard on the eyes, elements were large for the viewport etc…

[Tom]

Hi there,

You can likely just using @media with min-height or max-height depending on your needs:

@media (min-height: 800px) {
    /* Everything in here for when height is larger than 800px */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[johnaps]

truth is i get the size i want if i make the class

.inside-article {
      transform: scale(0.9);
}

But that makes the page have padding all around the content…
Is there a way to scale down the page content and keep the original position somehow?

[David]

Hi there,

Is the issue only visible on this ‘oldish’ laptop ?
As it may be related to the screen resolution of the device or even browser zoom level.

Last thing you want to do is improve the look of the site on an old device to find it negatively affects modern small screen devices

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

No truth is i tried in on my desktop as well and i like it… my content is showing a bit larger than i want…
I am trying to achieve amazons style on my site, and their content relative to their header is smaller…
So should mine…

Can i scale it down somehow? On all devices?

[David]

I wouldn’t suggest using transform scale on all of your content – lower spec devices will suffer on performance.

Why not just reduce content font sizes, padding, separating spaces, thumbnail sizes ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[johnaps]

I managed to get around with tinkering all elements css, took me half a day but it did it :D!! Thank you for your suggestions David!!!

[David]

Glad to hear that

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts