Solved

Making 'Mobile' site look the same as the 'Desktop' site

WrittenbyAni
Tourist
4 0 1

Hi there!

 

I'm currently making a website & have made clickable links to different categories on the homepage by using 1 gallery picture multiple times underneath one another.

 

It looks great on the desktop site however when I go to the mobile view it the gallery picture does not show in full & it looks awful.

 

Is there a way to make the mobile home page look the same as the desktop homepage? The rest of the pages are fine on the mobile view, it's just the homepage where I am experiencing problems.

 

Any help is much appreciated!

Thanks,

Ani

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@WrittenbyAni 

Thanks 

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

@media (max-width:749px) {
.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
    height: auto;
}
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 90 (90)
KetanKumar
Shopify Partner
36839 3635 11972

@inout 

It can be done by doing some code customization. please send me a personal message and we can discuss what you'd like

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nabeel93
Visitor
2 0 0

I need your help my friend . My desktop version is fine but my mobile site is not the same I can’t edit one they both change . 

https://www.saucestream.com

 

thanks in advance 

Scentsampler
Visitor
2 0 0
Hi

Shopify recommended one of their experts to me

Their company is called Wink Plan

Very reasonably priced and they got the job done for me

You can google them

Hope this helps thanks
BSkizzyy
Visitor
1 0 0

IMG_5287.png

Do you know how I could move the shop all box out of my image? The web version is perfect but the mobile is off just by alittle.

kylaS
Visitor
1 0 0

Hi! I’m having similar issue but reversed. My mobile layout is perfect but I hate how it looks on desktop. My banner on the home page is way to large for desktop, could you assist in any way please

 

https://www.mojoswim.com

 

 

 

 

Bertrand2
Visitor
1 0 0

J'ai le même problème . mon site https://wearecuteparis.com/

zhibaby07
New Member
4 0 0

Hello

 

wonder if you can help me with making 'Mobile' Site Look The Same As The 'Desktop' Site.

 

here is my website: www.sistashood.com 

 

and I don’t think to have theme.scss.liquid under Asset …only theme-editor.js 


my theme is craft 

 

thank you 

MonayDollhouse
Visitor
1 0 0

same my website 

 

https://www.monaydollhouse.com

 

KetanKumar
Shopify Partner
36839 3635 11972

@MonayDollhouse 

thanks for store url but sorry its password protecct 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TC0126
Tourist
4 0 1

Hi 

I am also having issues with Mobile site doesn't look the same as the website.   Can you kindly have a look at my site and advise what can I do to fix it?

www.formidablebeauty.com

I cant not find the file Asset->/theme.scss.liquid-> 

Please see desktop screenshots and also mob screenshoots.  I would like to display the videos properly on Mob platform if possible. thank you 

screen .pngscreen 2.pngmob.PNGmob 1.PNG

KetanKumar
Shopify Partner
36839 3635 11972

@TC0126 

sorry for this 

its your theme allow to syles.css 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
TC0126
Tourist
4 0 1

Hi. Could you please explain what do you mean by “its your theme allow to syles.css “

do you mean I enter below code in syles.css?

 

@media (max-width:749px) {
.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
    height: auto;
}
KetanKumar
Shopify Partner
36839 3635 11972

@TC0126 

same issue and some theme so please add above code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Nadinacollin
Visitor
1 0 0

Hello please could you also help me I want my mobile website to look the same as my desktop version my link is 

https://nodgiftsco.com

 

SpacePigeon3040
Tourist
3 0 1

Hi I'm having the same problem. I am using the free theme Debut. The mobile site looks great but the desktop is out of proportion. My site is www.veronicalopez.us. Thank you in advance for the help. 

kelleeknott
New Member
8 0 0

@KetanKumar I am having the same issue, except that I'd like to have my desktop version look like my mobile version. Could you please help? www.nursedacy.com pwd: hadley

KRSCOMICS
Visitor
1 0 0

Hi @KetanKumar.  Looking for me mobile site to look like me desktop site.  Can you please provide me with the code?

krscomics.com

Thx!

inout
Tourist
8 0 5

Dear KentanRumar,

i have the same problem.

Can you please help me?

URL: inout-shop.de

Password: DavidTobi

inout
Tourist
8 0 5

@KetanKumar I would really appreciate!!

KetanKumar
Shopify Partner
36839 3635 11972

@inout 

sorry for that issue 

can you please share issue images 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
inout
Tourist
8 0 5

Dear @KetanKumar 

my URL is: inout-shop.de

and Password: DavidTobi

The Banner on my Homepage at Mobile view is cutting off. How can I fix it?

Thank you very much!

rleahy14
Visitor
1 0 1

Struggling to have my mobile and web page look the same. www.mellowheights.com 

 

How do I make them look the same?

KetanKumar
Shopify Partner
36839 3635 11972

@rleahy14 

can you please confirm this look fine?

KetanKumar_0-1634573753743.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Scentsampler
Visitor
2 0 0

Hi I have the exact same problem.

Desktop view is 100000% perfect.
Mobile view isn’t good at all!

Website:

www.thescentsampler.com

Would you be able to guide me on how to make the website to desktop view only? It doesn’t even have to be the whole website, just the homepage will be fine. But either one would be great.

(In conclusion I wanted desktop view for both desktop and mobiles)

 

Would really appreciate it if you could help me out with this 


Thank you

 

KetanKumar
Shopify Partner
36839 3635 11972

@Scentsampler 

can you please share issue image?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mills-tgc
Tourist
6 0 2

Hi!

 

I am having problem with making my mobile site look exactly as the desktop site. 

My pictures on the mobile site gets cropped.

 

Any help is much appreciated!

Thanks!

KetanKumar
Shopify Partner
36839 3635 11972

@Mills-tgc 

can you please share store url 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mills-tgc
Tourist
6 0 2
Mills-tgc
Tourist
6 0 2
KetanKumar
Shopify Partner
36839 3635 11972

@Mills-tgc 

thanks for url can you pleas confirm 

KetanKumar_0-1650264803050.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Mills-tgc
Tourist
6 0 2

Yes, this is my website

 

Mills-tgc
Tourist
6 0 2

Screenshot 2022-04-20 at 12.29.45 AM.png

 It is supposed to look like that on desktop. But I have problem having it look the same when browsing on phone

 

Mills-tgc
Tourist
6 0 2

Hi! Yes this is my website!

KetanKumar
Shopify Partner
36839 3635 11972

@Mills-tgc 

can you please try this way code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Ourfurrybuddy
Visitor
1 0 0

Hey I am having the same problem, I really hate the drop down menu! I have 2 sites I can not figure out for the life of me how to get the mobile nav to look like the desktop. 

here are my sites.

www.ourfurrybuddy.com

www.sewchipper.com

 

inarbi
New Member
8 0 0

Hi there! I'm having the same issue. Tried the code provided but still not working. Please help me. 

Emilymtaylor
Visitor
1 0 0

My website is www.mia-swim.com

 

i have tried the below code: adding this at the bottom of the Theme.scss.liquid (Tried at the bottom and under 'add any custom styles' neither work. Can you please help? On the mobile the collections show underneath one by one.. on my desktop there are three collections in one row.

}
@media (max-width:749px) {
.image-bar--medium .image-bar__content, .image-bar--medium .image-bar__item {
height: auto;
}
}

Yas3
Tourist
3 0 2

Hi there, 

 

I've tried the below codes and none of them work for my website. 

Can someone help me please?

www.atelierroc.com

 

KetanKumar
Shopify Partner
36839 3635 11972

@Yas3 

oh sorry for that issue, can you please send issue images?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Yas3
Tourist
3 0 2

IMG_3736.PNG

 

I have tried this:

https://www.mojoin.com/show-shopify-banner-image/

 

But it comes out as a different design. 

www.atelierroc.com

KetanKumar
Shopify Partner
36839 3635 11972

@Yas3 

yes, please try that

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing