- This topic has 3 replies, 2 voices, and was last updated 2 years, 9 months ago by
.
Hi there, I need my main image for each blog post to cover the full width of the screen with no margin on mobile.
Please browse to this URL on your mobile (not desktop):
https://itestgod.com/is-abortion-a-sin/
Notice how there is a margin (white) on either side of the pink image.
If you scroll down the page a bit, you’ll see I was able to remove the margin on the cover (purple quote) using media queries, applying a negative margin. See?But I don’t know what div to target or what code to use for the featured/main blog image. Most blogs and online news sites have full width on their images.
I trust you understand what I’m talking about. Please send me the code to remove the margin on the main image. It should target a div class, then it will apply to all my images (remove the margin) for every image I add.
Thank you
Hi @14728833,
I hope you are well today and thank you for your question.
The margin is not added to the specific image div but to the div containing all the content.
You can remove all the content margin on mobile by adding the following CSS code in the Custom CSS code option of your theme on the below path.
Admin Area -> Jevelin -> Theme Settings -> Custom CSS/JS -> CSS Code
@media (max-width: 1025px){ .container.entry-content { margin: 0 !important; } div#content { padding-right: 0 !important; } }Best regards,
Shufflehound teamGood day, did you actually look at a blog post on a mobile device once you added the recommended CSS? It looks ridiculous. The entire blog post has no margin; the text is pushed right up against the sides of the phone on the right and left. You’ve applied no margin to the entire container, including the footer—not what I want to achieve.
The solution should be simple: On mobile only, I want images to occupy the full width of the screen (no margin) and the rest of the blog post should have a margin on the left and the right. As I said previously, I was able to achieve this with the cover image using a negative margin. Browse to the following URL on your mobile device: https://itestgod.com/how-to-pray-for-money/
Look at how the purple cover image occupies the full width of the screen. I used this CSS to achieve the desired result:
@media screen and (max-width: 570px) {
.wp-block-cover, .wp-block-cover-image {
position: relative;
background-size: cover;
min-height: 360px;
min-width: 412px;
width:100%
margin-left: -19px;
}
}Let’s try this again: What div class do I target for blog post images so that I can apply a negative margin to the image only?
Thank you
Natalie WilkinsonI have already described this in my earlier reply as below.
The margin is not added to the specific image div but to the div containing all the content.
You can remove all the content margin on mobile by adding the following CSS code
Also, what you have shared is an incorrect solution and won’t work correctly as shown in the attached screenshot.
To achieve this, you have to develop custom code in the child theme of the Jevelin theme.
Developing custom code for custom functionality is beyond the scope of support that we provide here. Please see https://themeforest.net/item/jevelin-multipurpose-premium-responsive-wordpress-theme/14728833/support
If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site. Shufflehound recommends the developer https://www.upwork.com/freelancers/~011652ffec8865c6d5
