make desktop site look the same as mobile

make desktop site look the same as mobile

bulkspice
Tourist
4 0 1

Hi there! My shopify account looks great on desktop view but it really looks awful on the mobile view. Is there any way that I can make desktop view and mobile view the same? Here are the screenshots (bulkspice.nl)

 

bulkspice_0-1718470294533.pngbulkspice_1-1718470331897.png

also another example when using an app in which things look horrible:

bulkspice_2-1718470432613.png

 

Replies 8 (8)

kaiyaa
Trailblazer
292 23 28

Hello @bulkspice 

Yes you can make it same as it. I can help you to make it same

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
bulkspice
Tourist
4 0 1

yes please. info about site is in this page.

kaiyaa
Trailblazer
292 23 28

For that we need to update your theme code.

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me

john_stones
Shopify Partner
4 0 1

hi @bulkspice ,

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

bulkspice
Tourist
4 0 1

hi, it's bulkspice.nl. there is no password. Thanks.

Made4uo-Ribe
Shopify Partner
6932 1647 2034

Hi @bulkspice 

Do you mean the buttons? Do you like make the buttons inside on the banner on the mobile screen? If it is please add the buttons. So we can make the changes with the buttons. 

It would be the same like this. 

Made4uoRibe_0-1718472171738.png

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

@media only screen and (max-width: 749px){
.banner__box.content-container.content-container--full-width-mobile {
    position: absolute;
    bottom: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
}
}

 

And save. 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
bulkspice
Tourist
4 0 1

hi, it makes the button stay the same size on a smaller surface, but i mean that the button changes according to the space it has on mobile.

thanks.

Made4uo-Ribe
Shopify Partner
6932 1647 2034

So you want to make it the buttons smaller? Can you please, clarify the edits that you like? Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.