Jump to content

I need three product images on my home page to sit beside eachother in Mobile View

Recommended Posts

Site URL: https://www.daronprice.com.au/

Im having a few problems with how a few product images look on my homepage.

On desktop they appear fine but in Mobile view they stack on top of each other whereas I would like the three images to sit beside each other like how it looks on the desktop view. Is there any solution to this or any code I can use to fix this issue? 

Any help would be very much appreciated!

here are some screenshots below for reference to what Im talking about.

 

Screen Shot 2021-01-28 at 2.59.31 pm.png

Screen Shot 2021-01-28 at 3.00.13 pm.png

Link to comment
  • Replies 20
  • Created
  • Last Reply
6 hours ago, DaronP said:

Site URL: https://www.daronprice.com.au/

Im having a few problems with how a few product images look on my homepage.

On desktop they appear fine but in Mobile view they stack on top of each other whereas I would like the three images to sit beside each other like how it looks on the desktop view. Is there any solution to this or any code I can use to fix this issue? 

Any help would be very much appreciated!

here are some screenshots below for reference to what Im talking about.

 

Screen Shot 2021-01-28 at 2.59.31 pm.png

Screen Shot 2021-01-28 at 3.00.13 pm.png

Could you add a spacer on top of the product row? then I can suggest a code to make it display well on mobile

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
19 minutes ago, DaronP said:

I have tried to add a spacer as you recommended but it doesn't seem to change anything when going into mobile view. 

If you are able to help me with the code that would be awesome!

where is the spacer? adding it and tell me so I can suggest code, 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
Just now, DaronP said:

adding a spacer doesn't do anything, I just need help with what code to use so it can display in 3 columns on mobile. If it helps, I added a spacer in between the text "A few of your Favourites" and the product row. 

Add spacer above this row, it is required to select correct row on the page, so just add it and let me know if you did, it is a part of the solution, code still require

image.thumb.png.798154e8d864ef4fa57d00749c22ce0a.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 minutes ago, DaronP said:

Yes I have added a spacer where you told me. 

image.thumb.png.4d709bee2d33d996b7e8a7e719686da8.pngI mean the spacer on top of product row like so

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
3 minutes ago, DaronP said:

Sorry I forgot to save changes, you should be able to see now that Ive added a space where you told me. 

 

no it's not, it was part of the above title, could you hover over the product row and add a spacer so it sit above the products?

image.thumb.png.970eec59bd7e0a75464b7f5d67c3ef67.png

 

image.thumb.png.da6cdc35a86465f83fe94d3c097ae655.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
2 minutes ago, bangank36 said:

no it's not, it was part of the above title, could you hover over the product row and add a spacer so it sit above the products?

image.thumb.png.970eec59bd7e0a75464b7f5d67c3ef67.png

 

image.thumb.png.da6cdc35a86465f83fe94d3c097ae655.png

It wont let me add one big spacer above the product row so I have added three spacers above each image, will this be okay?

Link to comment
2 minutes ago, DaronP said:

It wont let me add one big spacer above the product row so I have added three spacers above each image, will this be okay?

no...

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
21 minutes ago, DaronP said:

It wont let me add one big spacer above the product row so I have added three spacers above each image, will this be okay?

Try 

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-4 {
      width: 33.33% !important;
      float: left !important;
    }
}

:not(.sqs-edit-mode) #block-yui_3_17_2_1_1611892954947_10780 {
  display: none;
}

image.png.29e1a539d12fb508d43adf01d4489b4b.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
3 minutes ago, bangank36 said:

Try 


@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-4 {
      width: 33.33% !important;
      float: left !important;
    }
}

:not(.sqs-edit-mode) #block-yui_3_17_2_1_1611892954947_10780 {
  display: none;
}

image.png.29e1a539d12fb508d43adf01d4489b4b.png

that worked wonders! Thank you so much!

I have another question regarding something else if thats okay. I have another post under my account that talks about my 'about' section on the home page and that the text next to the image to be beside it in mobile view. I've added some pictures for reference 

Screen Shot 2021-01-21 at 11.38.22 pm.png

Screen Shot 2021-01-21 at 11.38.43 pm.png

Link to comment
Just now, DaronP said:

that worked wonders! Thank you so much!

I have another question regarding something else if thats okay. I have another post under my account that talks about my 'about' section on the home page and that the text next to the image to be beside it in mobile view. I've added some pictures for reference 

Screen Shot 2021-01-21 at 11.38.22 pm.png

Screen Shot 2021-01-21 at 11.38.43 pm.png

You want side by side as well?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
3 minutes ago, DaronP said:

Yes if thats possible that would be awesome!

it display worse

image.thumb.png.364e2835db5cbfae0a6e82c00c2ff8c9.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
49 minutes ago, bangank36 said:

it display worse

image.thumb.png.364e2835db5cbfae0a6e82c00c2ff8c9.png

Hi sorry for the inconvenience, Ive decided to make a few changes to the product grid, Instead of 3 I have added 4 product images but I would like them to sit in 2 columns. So 2 rows and 2 columns where the images display beside eachother in 2 rows and 2 columns on the mobile view. Hope you can help!

Link to comment
3 hours ago, DaronP said:

Hi sorry for the inconvenience, Ive decided to make a few changes to the product grid, Instead of 3 I have added 4 product images but I would like them to sit in 2 columns. So 2 rows and 2 columns where the images display beside eachother in 2 rows and 2 columns on the mobile view. Hope you can help!

try 

@media only screen and (max-width: 768px) {
    #block-yui_3_17_2_1_1611892954947_10780 + .row .sqs-col-3 {
      width: 50% !important;
      float: left !important;
    }
}

:not(.sqs-edit-mode) #block-yui_3_17_2_1_1611892954947_10780 {
  display: none;
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.