[Resolved] CSS for content-area on Smartphones

[HansRuedi]

I’m using “Slideout” from your library. Would you please provide CSS for the content-area on smartphones in portrait mode to give me less space (less background) on the left and right side of the content-area.

Thanks for your help, Hans

[Leo]

Hi there,

Smartphones in portrait mode are tough to deal with as every phone’s a bit different.

So just to make sure, you want to see less pink-ish background?

Let me know 🙂

[HansRuedi]

Hi Leo,

Yes, less background with the color value f4f3f4 after import of slideout…
…i’ve tried:

@media screen and (max-width: 480px) {
.content-area {
	margin-left: -25px; width: 120%;
}
}

…what then looks like the way I’m “dreaming of” on my iPhone but really seems to be a hack 😉

[Leo]

Have you solved this?

I would try something like this:

@media (max-width: 768px) {
    #content {
        padding: 20px;
    }
}

Might need to find tune the breakpoint.

[HansRuedi]

Hi Leo,

Thanks for your support. There was only something missing…

@media (max-width: 768px) {
    #content {
        padding: 20px !important;
    }
}

…now it’s solved. Thanks!

[Leo]

No problem 🙂

[Author]

Posts