- This topic has 14 replies, 2 voices, and was last updated 5 months ago by
Leo.
-
AuthorPosts
-
October 1, 2020 at 8:13 am #1467486
Mark
Hello, I’m trying to add some padding to category pages on mobile. I saw this on another topic and it didn’t work…
@media (max-width: 768px) {
.archive .page-header {
padding: 30px;
}
}October 1, 2020 at 8:30 am #1467516Leo
StaffCustomer SupportHi there,
That CSS should be really close.
Try this:
@media (max-width: 768px) { .archive .page-header { padding-left: 30px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 8:35 am #1467524Mark
That didn’t work either. I have it on there now.
October 1, 2020 at 8:38 am #1467532Leo
StaffCustomer SupportI’m not seeing the CSS being added.
Can you clear and disable your caching plugin first?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 8:41 am #1467541Mark
Done
October 1, 2020 at 8:47 am #1467549Leo
StaffCustomer SupportDoes the CSS work if you put it to the top of the Additional CSS field?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 8:51 am #1467556Mark
I just put it update and it doesn’t appear to be working.
October 1, 2020 at 8:54 am #1467569Mark
Meant to say up top.
October 1, 2020 at 8:56 am #1467573Leo
StaffCustomer SupportMaybe something is stripping all of your media query CSS. This is the result when I added using the browser inspector:
https://www.screencast.com/t/8KkGiTh37qI’m still seeing WP Rocket activated in the source.
Can you make sure it’s actually disabled?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 9:01 am #1467586Mark
My bad, it wasn’t disabled. Autoptimize was. They both are now.
October 1, 2020 at 9:29 am #1467633Leo
StaffCustomer SupportThere we go. It was being overwritten by this CSS you’ve also added:
.separate-containers .page-header { background: transparent; padding: 20px 0; }
So let’s make it more specific like this:
@media (max-width: 768px) { body.separate-containers.archive .page-header { padding-left: 30px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 9:30 am #1467638Mark
Just to be clear, remove the top one and replace with bottom one?
October 1, 2020 at 9:32 am #1467645Leo
StaffCustomer SupportNope you can keep the top one.
And just add the second one to replace the original code I’ve provided here:
https://generatepress.com/forums/topic/mobile-category-padding/#post-1467516Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/October 1, 2020 at 9:35 am #1467657Mark
Did it and looks great. Thanks!
One more question while I have you, please. On mobile-only, is there a way to make my added media images in the body of posts stretch the container? I create all of my post images and they will eventually be the same size. Please see the example post on mobile below and you’ll see how the non-features image just misses the left-hand side. Thanks
October 1, 2020 at 9:44 am #1467670Leo
StaffCustomer SupportAny chance you can open a new topic?
We will get to it 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.