Images on My Shopify Page are WAY too big on Desktop View, but great on mobile view

risa2
New Member
1 0 0

Hi,

I have made a page under Online Store -> Pages -> Add Page using the Rich Text Editor and while the page looks fantastic in mobile view, it is SUPER huge on Desktop. I tried adjusting the size by clicking Edit Image and trying multiple different sizes. And no matter what I set it to, in desktop view it's always the same, super huge size. I have also tried deleting the image and adjusting the size to be smaller in its original file and reputting it there but it's still too big. It's not from the theme itself (which we have Flow for the rest of the website) and this page is only accessible by link. Can someone please help me make the "Buy Now" button and the image much more normal sized on Desktop view, but maintain the good mobile view? 

The landing page can be found at: https://popyum.com/pages/enfamil

 

Thanks!

Replies 2 (2)
diego_ezfy
Shopify Partner
2298 413 538

@risa2,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

<style>
@media (min-width: 600px){
    .template-page .rte img{
    max-width: 300px !important;    
}

.template-page .rte a> img{
    max-width: 200px !important;    
}

}
</style>


You can change the values as per your wish:

300px = width of the images
200px = width of the buy button

Kind regards,
Diego

 

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
BananaMoon
Excursionist
23 1 1

This is probably because your theme is not well optimized for main devices resolutions (380x width) as well as desktop (+1080p).

There are plenty of free resources to teach you basic responsive skills.

Take care,