Inner Page Custom Content Section is not Responsive on Mobile

Solved
Highlighted
New Member
7 0 0

Hey Guys,

 

I created a section with Custom Content and added it to a custom page so I can add more content. Text and Images look great on desktop but they don't seem to be responsive on mobile - the page just continues to shrink the images and text so they fit instead of rearranging them. I copied the original Custom Content section settings.

Do you have any advice on how to resolve? 

https://zatechsports.com/pages/compression-tech 

0 Likes
Highlighted
New Member
7 0 0

And, I missed to mention the theme - it is Debut.

0 Likes
Highlighted
Excursionist
334 50 77

Please place this code at the end of theme.scss

@media only screen and (max-width: 768px) {
.custom__item--image {
width: 100%;
}
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
New Member
7 0 0

Hi param-babla,

 

Thanks so much for the speedy response! I tried a similar solution but it does not work - it still shrink the content - see screenshot below. Does it make a difference that that section is not on the Home Page but on another page? The name of the added custom section is my_zt_adv_cc.liquid.

Thanks again!

ZT_0-1599152132716.png

 

0 Likes
Highlighted
Excursionist
334 50 77

Which page is this?

If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
New Member
7 0 0

Here is the page:

https://zatechsports.com/pages/compression-tech 

It hyperlinks from the three buttons on the Hope Page right above the review quotes.

0 Likes
Highlighted
Excursionist
334 50 77
@media only screen and (max-width: 768px) {
.custom__item--image {
width: 100%;
flex:  0 0 100% !important;
}
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
0 Likes
Highlighted
New Member
7 0 0

Thanks 

 

0 Likes
Highlighted
New Member
7 0 0

ZT_0-1599156140732.png

 

0 Likes
Highlighted
Excursionist
334 50 77

This is an accepted solution.

/* change as below */
@media only screen and (max-width: 768px) {
.custom__item--image, .custom__item--text {
width: 100%;
flex:  0 0 100% !important;
}
}
If this solution works, then please accept it as solution and like.
For theme customization, please contact parambabla.soft@gmail.com
1 Like