Hi there,
Can you provide your site’s URL so we can take a look at your current mobile layout?
I’m using the GP basic theme, with no modifications.
The posts index has title, image, text, with a margin on the left and right. I want the image only to be full width only in the mobile view.
If you still need to see the site, is there a way to DM you a link?
-
This reply was modified 8 months ago by
tbronson.
Okay, try adding this CSS:
@media (max-width: 768px) {
.single-post.separate-containers .inside-article {
padding: 0;
}
.single-post.separate-containers .inside-article .entry-header,
.single-post.separate-containers .inside-article .entry-content,
.single-post.separate-containers .inside-article footer.entry-meta {
padding: 30px;
}
}
Adding CSS: https://docs.generatepress.com/article/adding-css/
If it doesn’t work, feel free to share the link here in your reply so I can check it directly.
Thanks, but that didn’t work. I cleared caches on server and browsers.
Here’s the link: https://www.temporary-url.com/ED8D (sorry for the delay, I was burned before with posting links in the wrong places).
ying
(@yingscarlett)
Hi there,
Thanks for providing the site link.
Try removing Alvind’s CSS and add this:
@media(max-width: 768px) {
.single-post .entry-content .wp-block-image {
margin-inline: -30px;
max-width: 100vw;
}
}
Let me know if this helps!
Thanks! That seems to work perfectly in single post view, but not on the blog index page with the list of posts and excerpts.
(BTW, full width IMO makes a HUGE difference in how engaging the images are. It would be great if this full width was an easy option.)
ying
(@yingscarlett)
The CSS is for single post only as you only provided a single post link, can you link me to your blog as well?
Oh, sorry, I thought that went to the home page. I checked this one: https://www.temporary-url.com/DE41C.
For the homepage, try this CSS:
@media (max-width: 768px) {
.blog.one-container .site-content {
padding: 0;
}
.blog.one-container .entry-header,
.blog.one-container .entry-summary,
.blog.one-container footer.entry-meta,
#nav-below {
padding-inline: 30px;
}
}
That seems to be working great. Thanks, Alvind and ying!
Cheers!
