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

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.

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.

 

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

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!

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, 

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. 

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

Yes I have added a spacer where you told me. 

2 minutes ago, DaronP said:

Yes I have added a spacer where you told me. 

I mean the spacer on top of product row like so

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

5 minutes ago, bangank36 said:

I mean the spacer on top of product row like so

 

Sorry I forgot to save changes, you should be able to see that ive added a spacer where you told me to. 

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?

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?

 

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?

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...

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;
}

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;
}

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 

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 

You want side by side as well?

Just now, bangank36 said:

You want side by side as well?

Yes if thats possible that would be awesome!

3 minutes ago, DaronP said:

Yes if thats possible that would be awesome!

it display worse

1 minute ago, bangank36 said:

it display worse

ah okay I might not do that then, I will leave it how it is, thanks so much for your help! really means a lot!

49 minutes ago, bangank36 said:

it display worse

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!

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;
}