How can I make my mobile layout match my desktop layout?

[Luburic]

Hello there 

My Name is Marko and I need Your Help!!!

I Like the way of how my photos are layed out on the desktop but the Phone verison dosent look like the Desktop verison.

But on the Phone it looks like this

I would like it to be layed out the same way it is like in the desktop version.

Is that possible?

heres my URL: https://santa-slippers.com/

I would really appreciate if someone can help me out with that
Friendly regardes 
Marko

[Dan-From-Ryviu · Accepted solution]

Widht of the mobile is smaller than desktop and it will look a little ugly like this if you want it appear the same in mobile

[Dan-From-Ryviu · Accepted solution]

Sure, where is your slide show?

[Dan-From-Ryviu · Accepted solution]

Hi @Luburic 

Your slideshow image now looks good on mobile. I recommend you add 2 slideshow sections, one for mobile and one for desktop and then I can make desktop's slideshow hide on mobile and vise versa so you can upload image for each device instead. Of please design image fit with your desktop then I can make slideshow on mobile appear as layout on desktop for you

[Dan-From-Ryviu · Accepted solution]

You can make one for mobile, and I can hide it on the desktop for you. Do you want to hide this current slideshow on desktop? 

[Luburic · Accepted solution]

Yes i want it to be hiden on Desktop but visible on phone.

[Dan-From-Ryviu · Accepted solution]

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code before </head> tag

<style>
@media (min-width: 768px){
#shopify-section-template--20019982532935__f3611bc0-d05f-447a-886f-425b496d8c12 {
display: none;
}
}
</style>

[Luburic · Accepted solution]

Thank you it is now rounded off but The collage is still there 

this one btw

Can you delet this one from the phone version

[Dan-From-Ryviu · Accepted solution]

HI @Luburic 

Please update code 

<style>
@media (min-width: 768px){
#shopify-section-template--20019982532935__f3611bc0-d05f-447a-886f-425b496d8c12 {
display: none;
}
}
@media (max-width: 767px){
#shopify-section-template--20019982532935__8a0da6d1-da96-4d83-ba6a-836909adf9d8 {
display: none;
}
}
main#MainContent .slideshow__slide .slideshow__media { background: transparent  }
main#MainContent .slider-mobile-gutter .slider-buttons { display: none !important; }
</style>

[Dan-From-Ryviu · Accepted solution]

Hi @Luburic 

Please update code to this to make those corners are rounded

<style>
@media (min-width: 768px){
#shopify-section-template--20019982532935__f3611bc0-d05f-447a-886f-425b496d8c12 {
display: none;
}
}
@media (max-width: 767px){
#shopify-section-template--20019982532935__8a0da6d1-da96-4d83-ba6a-836909adf9d8 {
display: none;
}
}
main#MainContent .slideshow__slide .slideshow__media { background: transparent  }
main#MainContent .slider-mobile-gutter .slider-buttons { display: none !important; }
.multicolumn.background-primary .multicolumn-card { border-radius: 20px; }
</style>

[Dan-From-Ryviu · Accepted solution]

Widht of the mobile is smaller than desktop and it will look a little ugly like this if you want it appear the same in mobile

[Luburic]

Is it possible then to make a slide show of photos on the phone and keep the layout on the Desktop? 

[Dan-From-Ryviu]

It is possible. 

[Luburic]

Do you think you could help me with that?

I would really appriciate it.

[Dan-From-Ryviu · Accepted solution]

Sure, where is your slide show?

[Luburic]

I dont have it jet but I can add it now, will it be also visible on the Desktop then? Bacause i only want to have it on the Phone version?

[Luburic]

Alright so i have added the slide show now. It is currently only two pictures but it wil be more. The slideshowe is on the bottom btw. Thank you very much

[Dan-From-Ryviu · Accepted solution]

Hi @Luburic 

Your slideshow image now looks good on mobile. I recommend you add 2 slideshow sections, one for mobile and one for desktop and then I can make desktop's slideshow hide on mobile and vise versa so you can upload image for each device instead. Of please design image fit with your desktop then I can make slideshow on mobile appear as layout on desktop for you

[Luburic]

Do I have to make a Slideshow on Desktop or can I just make one for mobile and hide it on the desktop? And how can design my image fit?

[Dan-From-Ryviu · Accepted solution]

You can make one for mobile, and I can hide it on the desktop for you. Do you want to hide this current slideshow on desktop? 

[Luburic · Accepted solution]

Yes i want it to be hiden on Desktop but visible on phone.

[Dan-From-Ryviu · Accepted solution]

Go to your Online store > Themes > Edit code > open theme.liquid file, add this code before </head> tag

<style>
@media (min-width: 768px){
#shopify-section-template--20019982532935__f3611bc0-d05f-447a-886f-425b496d8c12 {
display: none;
}
}
</style>

[Luburic]

Thank you there are still two little problems dough

1. 

The edges are for some reason grey

2. 

and can you delet this part ?

An one more thing can you somehow insert a BUY button directly under it?

[Dan-From-Ryviu]

Please update code to this

<style>
@media (min-width: 768px){
#shopify-section-template--20019982532935__f3611bc0-d05f-447a-886f-425b496d8c12 {
display: none;
}
}
main#MainContent .slideshow__slide .slideshow__media img { border-radius: unset !important; }
main#MainContent .slideshow  .slider-buttons { display: none !important; }
</style>

About Buy button, you can do that by add text to button and add link of product to button of slideshow

[Luburic]

That actually didnt work because I want the images rounded off and the thing where it counts the images is still there

[Luburic]

And can you delet the Collage from the phone version now because we dont need it anymore

[Dan-From-Ryviu]

Please update the code. 

<style>
@media (min-width: 768px){
#shopify-section-template--20019982532935__f3611bc0-d05f-447a-886f-425b496d8c12 {
display: none;
}
}
main#MainContent .slideshow__slide .slideshow__media { background: transparent  }
main#MainContent .slider-mobile-gutter .slider-buttons { display: none !important; }
</style>

Related Collage, please delete 2nd slideshow from your Slideshow section

[Luburic · Accepted solution]

Thank you it is now rounded off but The collage is still there 

this one btw

Can you delet this one from the phone version

[Dan-From-Ryviu · Accepted solution]

HI @Luburic 

Please update code 

<style>
@media (min-width: 768px){
#shopify-section-template--20019982532935__f3611bc0-d05f-447a-886f-425b496d8c12 {
display: none;
}
}
@media (max-width: 767px){
#shopify-section-template--20019982532935__8a0da6d1-da96-4d83-ba6a-836909adf9d8 {
display: none;
}
}
main#MainContent .slideshow__slide .slideshow__media { background: transparent  }
main#MainContent .slider-mobile-gutter .slider-buttons { display: none !important; }
</style>

[Luburic]

I really appriciate you thanks a lot

[Dan-From-Ryviu]

@Luburic you are very welcome

[Luburic]

I Have just one more thing that drives me crazy 

These corners arend rounded of can you make that for me

[Dan-From-Ryviu · Accepted solution]

Hi @Luburic 

Please update code to this to make those corners are rounded

<style>
@media (min-width: 768px){
#shopify-section-template--20019982532935__f3611bc0-d05f-447a-886f-425b496d8c12 {
display: none;
}
}
@media (max-width: 767px){
#shopify-section-template--20019982532935__8a0da6d1-da96-4d83-ba6a-836909adf9d8 {
display: none;
}
}
main#MainContent .slideshow__slide .slideshow__media { background: transparent  }
main#MainContent .slider-mobile-gutter .slider-buttons { display: none !important; }
.multicolumn.background-primary .multicolumn-card { border-radius: 20px; }
</style>

[Luburic · Accepted solution]

Man I Loveeee you fr

[Dan-From-Ryviu]

Happy I could help