Solved

Image With Text - Image Second CSS Single Section Mobile plus Gap Removal

darnellswipe
Tourist
8 0 0

I would like to know how to change one of my Image with Text sections so on mobile the image is second. I don't want this to be the same on all of them so I would like it if I could get a custom CSS

 

My website link is evoads.co.uk

 

Screenshot 2024-03-28 at 17.35.22.png

 

I solved the issue for section 3&4, but the section two won't work as the image with text is opposite on the desktop view. Here is the code I used. 

 

 

 

@media only screen and (max-width: 600px) {
 .image-with-text__grid.image-with-text__grid--reverse{flex-direction: column-reverse;}
}

 

Copy
 
And then for the ones that worked the gap between the image and the text is too large. Is this fixable? 


Screenshot 2024-03-28 at 17.36.18.png
Accepted Solutions (2)
Raj-webdesigner
Shopify Partner
236 52 53

This is an accepted solution.

Can You Put Again This Code In base.css File

@media only screen and (max-width: 600px){
 .image-with-text__grid.grid.grid--gapless{
     flex-direction: column-reverse !important;
 }
    .image-with-text--overlap .image-with-text__content {
        margin: -38px auto 0 !important;
        padding: 30px 11px 0 !important;
    }
    .image-with-text__content {
        padding: 11px 30px 0 !important;
     }
}
If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com

View solution in original post

Raj-webdesigner
Shopify Partner
236 52 53

This is an accepted solution.

Yes,

@media only screen and (max-width: 600px){
    .section-template--22336581534037__image_with_text_RwHXmC-padding .image-with-text.animate--slide-in {
        margin: -38px 0 0;
        padding: 38px 0 0;
        background: #272727;
        border-radius: 40px;
    }
}
If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com

View solution in original post

Replies 5 (5)

Raj-webdesigner
Shopify Partner
236 52 53

add this css in your base.css File

 

@media only screen and (max-width: 600px){
    #shopify-section-template--22336581534037__image_with_text_ew6XEf .image-with-text__grid {
        flex-direction: column-reverse !important;
    }
    .image-with-text--overlap .image-with-text__content {
        margin: -38px auto 0 !important;
        padding: 30px 11px 0 !important;
    }
    .image-with-text__content {
        padding: 11px 30px 0;
     }
}

 

If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
darnellswipe
Tourist
8 0 0

It worked to swap the images. But the gap for the images is still to big. Is that fixable? 

Raj-webdesigner
Shopify Partner
236 52 53

This is an accepted solution.

Can You Put Again This Code In base.css File

@media only screen and (max-width: 600px){
 .image-with-text__grid.grid.grid--gapless{
     flex-direction: column-reverse !important;
 }
    .image-with-text--overlap .image-with-text__content {
        margin: -38px auto 0 !important;
        padding: 30px 11px 0 !important;
    }
    .image-with-text__content {
        padding: 11px 30px 0 !important;
     }
}
If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com
darnellswipe
Tourist
8 0 0

Hello, thank you so much, it closed the gap, but then it switch all of them, but I don't want them all to have the same layout. I only wanted 3 out of the 5. Is that possible.

Raj-webdesigner
Shopify Partner
236 52 53

This is an accepted solution.

Yes,

@media only screen and (max-width: 600px){
    .section-template--22336581534037__image_with_text_RwHXmC-padding .image-with-text.animate--slide-in {
        margin: -38px 0 0;
        padding: 38px 0 0;
        background: #272727;
        border-radius: 40px;
    }
}
If you require further help to optimize your store, please don’t hesitate to reach out.

This contribution will always benefit you and you will get my full help easily and you can contact me easily.
Your Willpower Contribution Link :-

Contribution



Contect On My Mail :-raj.s.webdevloper@gmail.com