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

Solved
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)

Accepted Solutions
KetanKumar
Shopify Partner
32501 3268 10844

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 81 (81)
KetanKumar
Shopify Partner
32501 3268 10844

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
32501 3268 10844

@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
32501 3268 10844

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
New Member
2 0 1

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

KetanKumar
Shopify Partner
32501 3268 10844

@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
New Member
2 0 1
KetanKumar
Shopify Partner
32501 3268 10844

@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
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
32501 3268 10844

@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
32501 3268 10844

@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
32501 3268 10844

@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
32501 3268 10844

@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