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

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
36941 3642 12003

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 91 (91)

KetanKumar
Shopify Partner
36941 3642 12003

Hello, @WrittenbyAni 

Thanks for post.

Please share your site URL,
So I will check and provide a solution here.

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
WrittenbyAni
Tourist
4 0 1

Hi, 

 

The website is www.writtenbyani.com

 

Thanks,

Ani

KetanKumar
Shopify Partner
36941 3642 12003

@WrittenbyAni 

Thanks for it 

sorry site not work can you please check

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
WrittenbyAni
Tourist
4 0 1
Sorry about that.

www.writtenbyani.com

Hopefully that works!
KetanKumar
Shopify Partner
36941 3642 12003

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
WrittenbyAni
Tourist
4 0 1

Amazing - it worked! Thanks so much for your help!

4everGoujie
Visitor
2 0 1

Im having the same issue. My website is www.4evergoujie.com

KetanKumar
Shopify Partner
36941 3642 12003

@4everGoujie 

sorry for this issue can you please add 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: 749px) {
.hero--medium {
    height: 157px;
}
}

 

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
4everGoujie
Visitor
2 0 1

didn't work

KetanKumar
Shopify Partner
36941 3642 12003

@4everGoujie 

sorry for this can you please provide a screenshot?

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
Anewthingdesign
Tourist
4 0 1

Hello I am so new to this. I would like to be able to make my mobile site look more like my desktop site as well but I do not know how!

my website is anewthingdesigns.com

Anewthingdesign
Tourist
4 0 1
KetanKumar
Shopify Partner
36941 3642 12003

@Anewthingdesign 

sorry for that any issue 

can you please share issue image so i will give your proper 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
Anewthingdesign
Tourist
4 0 1

download (3).pngdownload (2).pnghere is the image of my mobile vs desktop. I would like my mobile to be spread out like my desktop site. 

Elissakay
Visitor
2 0 0

Hi!! I am having the same problem as well.  I assume i cannot use the same code as the other person?  My website is forevermyloves.com 

Umamigrocery
Tourist
3 0 3

Hey

I'm having the same issue. My website is https://daiwafood.com

KetanKumar
Shopify Partner
36941 3642 12003

@Umamigrocery 

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
Umamigrocery
Tourist
3 0 3

unnamed.png

KetanKumar
Shopify Partner
36941 3642 12003

@Umamigrocery 

KetanKumar_0-1635152622620.png

 

like this

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
Umamigrocery
Tourist
3 0 3

Thanks for your replies! 

 

So specifically where should I edit to have a PC site format in my mobile site? 

KetanKumar
Shopify Partner
36941 3642 12003

@Umamigrocery 

https://www.mojoin.com/show-shopify-banner-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
TheClique
Tourist
5 0 2

Hi Dear Ketan Kumar,

 

I‘m having the same issue. We have now a theme online and published but work on a new one which is not published so i cannot just share the link to change because it would change in the wrong theme. 

 

Can you please help me to let the theme look like the desktop version? should i give you permission as staff? 

 

Regards

Alex

KetanKumar
Shopify Partner
36941 3642 12003

@TheClique 

sorry for this issue if possible to share store preview link so i will check and update

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
TheClique
Tourist
5 0 2

Yes sure

 

NOTE: The theme must have the name "Copy of DRECOMMERCE FIVERR" 
PLEASE DO NOT CHANGE ANYTHING IF THE THEME HASN´T THIS NAME

 

PREVIEW LINK OF Copy of DRECOMMERCE FIVERR:

https://foxyskin.me/?_ab=0&_fd=0&_sc=1


Thank you very much

KetanKumar
Shopify Partner
36941 3642 12003

@TheClique 

thanks 

sorry i can't see any issue can you show me issue

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
TheClique
Tourist
5 0 2

the issue is that i would like the mobile version to look like the desktop version

KetanKumar
Shopify Partner
36941 3642 12003

@TheClique 

can you please add attachment mobile banner 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
TheClique
Tourist
5 0 2

 

You see in the pictures how the Desktop versions looks and how terrible the mobile version looks 

 

i want it to look like the desktop version on mobiles 

 

278BF945-1E3B-49DB-ACCF-D2BC915E01A7.jpeg

D1589F95-A1E2-4D02-91A6-5E7E065AB1BA.jpeg

C92F53CB-98F0-4107-979E-46565FC15FB1.jpeg

D9541D6B-94EC-425C-AF07-6C29C8A81537.jpeg

 

D0517562-B82A-483E-AB43-3329C7FC693A.jpeg

44FFBED9-CEE9-4368-8A52-F3B731681DB6.jpeg

KetanKumar
Shopify Partner
36941 3642 12003

@TheClique 

if you have set the same desktop view it's was doesn't good UX 
also, to much smaller content if you have set this look

do you need this view? many changes of backfile and customization

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
TheClique
Tourist
5 0 2

I would need a much better mobile version because this one is automatic designed from the desktop version and it doesnt look good

KetanKumar
Shopify Partner
36941 3642 12003

@TheClique 

sorry, i can't see your attachment your current URL can you please send as per the attachment's 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
Kamara007
Visitor
1 0 0

Hey I’m having the same issue my desktop version looks nothing like my mobile version. I would like them to look alike at least In some way.

BrendaBeverley
New Member
4 0 0

Thank you!

thalassa
Tourist
3 0 1

Hi i have the same problem with my website, the link is https://thalassamovement.com/ . can you please advise with this? 

 

many thanks!! 

KetanKumar
Shopify Partner
36941 3642 12003

@thalassa 

sorry for that issue can you please show me 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
thalassa
Tourist
3 0 1

Please find attached images of how it looks like in desktop and then how the images look in the mobile. 

DESKTOP

DESKTOP :Screenshot 2021-09-21 at 18.22.32.pngScreenshot 2021-09-21 at 18.22.50.png

MOBILE

Screenshot 2021-09-21 at 18.20.57.pngScreenshot 2021-09-21 at 18.21.03.png

images get super cropped when seeing them in a the mobile version. there's a way to make them look exactly same as desktop or at leat not as cropped? 

Please advise, will be much appreciated. 

thanks! 

KetanKumar
Shopify Partner
36941 3642 12003

@thalassa 

thanks for update

i have check your theme allow desktop and mobile separate image upload option can you please do this 

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
thalassa
Tourist
3 0 1

Hi kentan the message you just send me says : " can you please do this" but nothing followed. Can you please specify what I need to do?? I would really appreciated! 

Many thanks!! 

etetava24
Excursionist
13 1 7

HI @KetanKumar

Would you be able to help me with this also ?

Really just wanting the Home page on our mobile site to reflect what we have on our desktop version . 

Thanks 

KetanKumar
Shopify Partner
36941 3642 12003

@etetava24 @inout 

try this 

https://www.mojoin.com/show-shopify-banner-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
inout
Tourist
8 0 5

@KetanKumar I tried it but doesn't work for the Dawn Theme. Do u have any other ideas?

KetanKumar
Shopify Partner
36941 3642 12003

@inout 

yes please 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
inout
Tourist
8 0 5

@KetanKumar  The Desktop Banner looks good but the Mobile Banner don't fit.

 

Desktop:

Bildschirmfoto 2021-10-11 um 14.09.03.png

 

Mobile:

Bildschirmfoto 2021-10-11 um 14.09.37.png

KetanKumar
Shopify Partner
36941 3642 12003

@inout 

can you please upload different image mobile and desktop

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

@KetanKumar what do u mean with different image? Different I can only upload one banner and it is the same on mobile and desktop.

But the mobile Banner is cut on the sides.

Thanks already for your support.

KetanKumar
Shopify Partner
36941 3642 12003

@inout 

thanks for update

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

@KetanKumar Do you have any idea how to correct this?

KetanKumar
Shopify Partner
36941 3642 12003

@inout 

it can be done custom code change backend

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

@KetanKumar can you help me with the code? I have no idea about that. Sorry.