Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px) {
.nectar-recent-posts-single_featured .inner-wrap {
width: 100% !important;
}
}
@media only screen and (max-width: 999px) {
.nectar-recent-posts-single_featured .recent-post-container, .nectar-recent-posts-single_featured.multiple_featured > .container {
padding-left: 10px;
padding-right: 10px;
}
}
@media only screen and (max-width: 690px) {
.post-area.featured_img_left .article-content-wrap .post-featured-img-wrap {
height: 100px;
}
}
Hi Tahir, thanks, this made all the images on the homepage of the blog smaller. Our only concern is with the first image, as it is quite bigger than the rest. This is fine on desktop, but for mobile, we want it a bit smaller :)
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thank you: we are satisfied with the section for the relevant posts. However the first featured image is introducing new problems. Is it possible to show the featured image on mobile in the same style as the posts underneath it?
as you can see the button is too big and the text takes over almost all the place. so instead of this can we show it in the syle of the below only on mobile
Hi andrew and tahir,
Is it possible to make the image of the featured post in the blog smaller on mobile?
It takes a lot space right now
also for the the relevant posts are we looking for a way to make it all a bit smaller:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px) { .nectar-recent-posts-single_featured .inner-wrap { width: 100% !important; } } @media only screen and (max-width: 999px) { .nectar-recent-posts-single_featured .recent-post-container, .nectar-recent-posts-single_featured.multiple_featured > .container { padding-left: 10px; padding-right: 10px; } } @media only screen and (max-width: 690px) { .post-area.featured_img_left .article-content-wrap .post-featured-img-wrap { height: 100px; } }Thanks
ThemeNectar Support Team
Hi Tahir, thanks, this made all the images on the homepage of the blog smaller. Our only concern is with the first image, as it is quite bigger than the rest. This is fine on desktop, but for mobile, we want it a bit smaller :)
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px) { .nectar-recent-posts-single_featured .inner-wrap { width: 100% !important; } } @media only screen and (max-width: 999px) { .nectar-recent-posts-single_featured .recent-post-container, .nectar-recent-posts-single_featured.multiple_featured > .container { padding-left: 10px; padding-right: 10px; } .nectar-recent-posts-single_featured .recent-post-container .excerpt { margin-bottom: 5px !important; width: 100% !important; } .nectar-recent-posts-single_featured h2 { margin: 15px 0 10px 0 !important; } }Thanks
ThemeNectar Support Team
Hi again,
Thank you: we are satisfied with the section for the relevant posts. However the first featured image is introducing new problems. Is it possible to show the featured image on mobile in the same style as the posts underneath it?
as you can see the button is too big and the text takes over almost all the place. so instead of this can we show it in the syle of the below only on mobile
Hi Saliant,
Please send your website url.
Thanks.
Hey Again,
I am afraid it's not possible as the underlying HTML Markup is different.
Thanks
ThemeNectar Support Team
Then is it possible to hide the first post?
Hi Saliant,
Please try this css:
.nectar-recent-posts-single_featured {display: none;
}
Thanks.
Thanks :)