Mobil view problem. Pictures are fine, text not - Media Queries - Atlantic theme

alexandermen
Shopify Partner
9 0 3

Hello Shopify community,

I have a question regarding resizing the theme Atlantic for an iPad (portrait view).

I am currently using the "image with text" feature, to show text next to an image.
Basically, I am showing 3 images with text below each other.
If I am opening the website on an iPad (standard 9.7″), the text does not scale correctly. The text overlaps with each other.

If my browser-size is below 700 px (width), the theme switches to the mobile view and the text is readable again.
The text is readable in the mobile view. The text is under the pictures and not next to them. That is fine.

The text is also readable if the browser size is 1000px wide.
All pictures are fine, its the text only that makes me problem.

It could be fixed with the media queries, right?

I tried to change follow media queries, but it didn't helped.

@media screen and (max-width: 700px) {
.picture-block-wrapper .centering-wrapper {
position: static;
display: relative;
}
.picture-block-content {
padding-top: 50px;
padding-bottom: 50px;
margin: 0 auto;
}
}


and this one

@media screen and (max-width: 800px) {
.picture-block-heading {
font-size: 45px;
line-height: 46px;
}
}

Which media query did I missed?

Thank you for your help.

Greetings,

 

 

Replies 0 (0)