- This topic has 5 replies, 2 voices, and was last updated 3 years, 9 months ago by Tom.
-
AuthorPosts
-
June 14, 2020 at 3:41 am #1327163Ophira
Hi Team,
I want my blog layout on the homepage to display as a single column grid where the Featured image thumbnail is floated to the left and the Blog Title, meta and Excerpt is displayed floated to the right – on a desktop and tablet.
Whereas on mobile I want the layout to be Featured image followed by Blog Title, meta and Excerpt.
I cannot find an option in the customizer to set a different layout for desktop, tablet and a different layout for a mobile.
As a work around I have set the Customizer > Layout > Blog > Featured Image > Location: Above Title, Alignment: Center, Media Attachment Size: Full.
and added custom CSS
@media (min-width: 768px) {
img.wp-post-image {
width: 200px;
height: 200px;
float: left;
margin: 15px 15px;
object-fit: cover;
}
.inside-article::after{
content: “”;
clear:both;
display: table;
}
}Doing so leads to
A. The image sticking to the top of the blog grid on a tablet.
B. Also I don’t think it’s best practice to load a full size image and shrink it down to a thumbnail to get the effect I want, is there a workaround?
I would appreciate if you could help me out.
Best Regards,
Ophira
June 14, 2020 at 10:07 am #1327596TomLead DeveloperLead DeveloperHi there,
I think you’d be better off setting the featured image alignment to “Left” in the Customizer. That way you can get your desired layout on desktop/tablet by using the Customizer, and make any necessary tweaks on mobile.
Let me know if that works or not 🙂
June 15, 2020 at 8:03 am #1328740OphiraHi Tom,
I tired your recommendation. However this leads to the thumbnail pixelating on mobile.
Is there a way to display the featured image on the mobile taking up the entire width of the screen without pixelating? Which would be the same effect as :
Customizer > Layout > Blog > Featured Image > Location: Above Title, Alignment: Center, Media Attachment Size: Full
Best Regards,
Ophira
June 15, 2020 at 2:13 pm #1329150TomLead DeveloperLead DeveloperShould be quite easy, can you set it up that way so I can adjust with CSS?
There shouldn’t be any pixelating as long as the image isn’t being resized up.
June 16, 2020 at 4:37 am #1329759OphiraHi Tom,
How do I share the login details? This is public forum.
Best Regards,
Ophira
June 16, 2020 at 9:44 am #1330232TomLead DeveloperLead DeveloperWould we need login details? Is it possible for you to set it up like I mentioned above? We aren’t able to make any changes to your website.
-
AuthorPosts
- You must be logged in to reply to this topic.