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
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?
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;
}
}
1 Like
It worked to swap the images. But the gap for the images is still to big. Is that fixable?
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;
}
}
1 Like
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.
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;
}
}
1 Like
