I'm just working on post images for blogs - i'm comfortable with how they're displaying on desktop, but having trouble getting them to display full width on mobile.
Essentially; I'd like a post image to stretch from edge to edge (full-width) on mobile.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) {
.container, div.slider-nav, .post-area.standard-minimal.full-width-content article.post .inner-wrap {
max-width: 100%!important;
}
}
Although that did make the images on our blog post pages stretch full width, Unfortunately the css had some other effects that weren't ideal;
on mobile; It made the text in the blog posts as well stretch to the edges of the screen
on mobile; it made the Blog grid (from our /blog page) display all the masonry displayed blog posts halfway through the screen [ very strange ]
I do have a class applied to every single image on all of our blog posts; "mtm-blog"; is there any way to make that class of images only stretch across the screen full width?
Is there any way I could put some custom CSS in the CSS script area on each individual blog post then so it only applies to that single post?
Maybe something that says [ in css ]
"If mobile screen, then the container has no margin, but text has a left and right margin of 20px [ or 20% ]"
If you can help me write that out, I'll gladly apply it to my single page entries individually. I just don't know the correct pathing to write the CSS.
Hi again!
I'm just working on post images for blogs - i'm comfortable with how they're displaying on desktop, but having trouble getting them to display full width on mobile.
Essentially; I'd like a post image to stretch from edge to edge (full-width) on mobile.
Would you kindly help? Thank you in advance!
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) { .container, div.slider-nav, .post-area.standard-minimal.full-width-content article.post .inner-wrap { max-width: 100%!important; } }Thanks
ThemeNectar Support Team
Thank you!
Although that did make the images on our blog post pages stretch full width, Unfortunately the css had some other effects that weren't ideal;
I do have a class applied to every single image on all of our blog posts; "mtm-blog"; is there any way to make that class of images only stretch across the screen full width?
Again; your help is most appreciated
Hey Again, Hope you had a Great Weekend,
Unfortunately there is no such solution available at the moment .
Best
ThemeNectar Support Team
Thank you!
Is there any way I could put some custom CSS in the CSS script area on each individual blog post then so it only applies to that single post?
Maybe something that says [ in css ]
"If mobile screen, then the container has no margin, but text has a left and right margin of 20px [ or 20% ]"
If you can help me write that out, I'll gladly apply it to my single page entries individually. I just don't know the correct pathing to write the CSS.
The whole page is incapsulated in a container so its not possible to do what you are trying to do. See screenshot : http://prntscr.com/mzyebm .
Please consider hiring a freelancer over at Envato Studio for these Theme customizations as they are not provided as Support: http://themeforest.net/page/item_support_policy
Thanks
ThemeNectar Support Team
Thank you; thats helpful to understand! I appreciate it!