I added a custom block to my home page with a paragraph on the left hand side and an image on the right. Right now, this layout is not responsive. How do I get the image to stack on top of the copy in the mobile version?
1 Like
sorry for that issue please try this code
- Go to Online Store->Theme->Edit code
- Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second
@media only screen and (max-width: 749px) {
.custom__item.small--one-half {
-webkit-flex: 1 0 100%;
-moz-flex: 1 0 100%;
-ms-flex: 1 0 100%;
flex: 1 0 100%;
max-width: 100%;
}
}
1 Like
hello @StellaGold
please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.
@media only screen and (max-width: 749px){
#shopify-section-1626929987a641f08d .custom-content{
flex-wrap: wrap;
flex-direction: column-reverse;
display: flex;
}
#shopify-section-1626929987a641f08d .custom-content .custom__item{
flex: 0 0 100%;
}
#shopify-section-1626929987a641f08d .custom-content .small--one-half {
width: 100% !important;
}
}
please you can try this media query of bottom of theme.css file
@media only screen and ( max-width: 749px ) {
.custom__item.custom__item–text {
width: 100%;
display: flex;
flex: 1 0 100%;
order: 2;
padding-left: 0;
}
.custom__item.custom__item–image {
width: 100%;
padding-left: 0;
}
}
Hi, I need to insert a different image only on my mobile version in turbo theme slideshow, can you help me?
This is my website, you can see that in the mobile version the slideshow is small and you cant see what it says!
I tried to use various tips in the community, but since i dont have the asset theme.scsss.liquid I dont know where to put my new code or the pieces the online tips given to me.
Can you help me please?
1 Like
sorry for that your have add your code styles.scss file
1 Like
hello @FX2000
you can insert your code in to styles.scss file