Why do aligned images disappear on mobile view of front page?

Store Design
1

Hi

We have an issue when aligning the images on our front page but only when viewing it on a phone.

Usually the images aligned will show up one after another when browsing down the front page on a phone but now the second image aligned just disappears completely. When viewing the front page on a computer or Ipad the images stays aligned with the two images next to each other.

Do you have an idea of what might be the issue here and how to fix it?

Best,

Lærke

2

@Laerkehs

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

The URL for the shop is https://stromstore.dk/

1 Like
4

@Laerkehs

Please add this CSS to your theme.scss at the bottom of file

@media(max-width:545px){
.CustomSquares .Grid__Cell.\31 \/3--tablet-and-up.\31 \/3--lap-and-up.\31 \/2--phone {
width:100%
}
.CustomSquares .Grid__Cell.\31 \/3--tablet-and-up.\31 \/3--lap-and-up.hidden-phone {
display:block !important;
}
}

Thanks!

5

@Laerkehs

Please add the following CSS code to your assets/theme.scss.liquid bottom of the file.

@media(max-width:545px){
.CustomSquares .Grid__Cell.\31 \/3--tablet-and-up.\31 \/3--lap-and-up.\31 \/2--phone {
width:100%
}
.CustomSquares .Grid__Cell.\31 \/3--tablet-and-up.\31 \/3--lap-and-up.hidden-phone {
display:block !important;
}
}

Thanks!

6

Hey @Laerkehs .

Thanks for reaching out.

Did the above coding changes work for you? If so, be sure to mark their post as a solution to inform others that may view the thread.

I appreciate that you have included your online store URL as that is super helpful! Could you let us know which theme you are using? As this context will help determine the next steps to take.

If you are unsure about which theme is live on your store, you can navigate to the Theme Editor and select the three dots that are located towards the top left. I took a screenshot of my test store to show you the section I am referring to:

08-43-12088-28354
08-43-12088-28354737×605 79.9 KB

Looking forward to your response.

7

Thank you so much for your suggestion and help with the issue. It did not quite work - It worked on the section “Custom Squares” but the second image still disappear on the “Aligned Images” section.

1 Like
8

@Laerkehs

can you please share issue images ?

1 Like
9

front page seen on phone (Image disappear)
front page seen on phone (Image disappear)828×1792 274 KB

Front page seen on Website (All Images are correct)
Front page seen on Website (All Images are correct)2878×1529 751 KB

2 Likes
10

@Laerkehs

great thanks for more clear can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 639px) {
div#aligned-image-block--1640689814fe9fd8bd-1 {
    display: block !important;
}
}
1 Like
11

@Laerkehs

Please add the following CSS code to your assets/theme.scss.liquid bottom of the file.

@media only screen and (max-width: 639px) {
div#aligned-image-block--1640689814fe9fd8bd-1 {
    display: block !important;
}
}

Thanks!

1 Like
12

Thanks for your reply. It worked!

1 Like
13

@Laerkehs

its my pleasure to help us