[Narrative Theme] Preview producing different results on different monitors

Solved
New Member
3 0 0

I am working on my theme on my laptop, but when I preview on my desktop I am seeing different cropping on my photos.  I have no idea what to do in editing to prevent the extra cropping shown on the desktop preview since the laptop preview is perfect. Any help would be great! (If it can't be controlled because of the differences in screen size that would be valuable to know!) 

 

1st example: 

Presentation2.jpg

 

2nd example: Presentation3.jpg

 

0 Likes

Success.

Shopify Staff
Shopify Staff
756 74 148

Hey there, @Lee_Dickerson 

 

Bo here from Shopify Support! 

 

That is a really great question and it made me scratch my head a bit too. I checked in with our design team on this and they were able to confirm that the image sizes on your store are 100% responsive depending on the size of your screen - this in expected behavior and cannot be avoided. 

 

How are you liking the platform so far, Lee? Are you currently getting your store ready to launch? Let me know if there is anything else I can assist you with, I'm happy to help! 

 

All the Best,

Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

1 Like
New Member
3 0 0

Thank you very much! That makes sense- something to keep in mind! 

 

I do have another question, I posted it in the forum earlier today as well: Is it possible to reduce the empty space between slides in the Featured Slider? (The space between the Full Collection "HERE" button and the next photo) It'd great if I can reduce that empty space! 

Presentation1.jpg

 

 
 
0 Likes
Highlighted
Shopify Staff
Shopify Staff
756 74 148

That is a really great question! To reduce this spacing you will just need to add a little snippet of code to the theme.scss.liquid. 

 

NB When editing the CSS of your theme it is always a good idea to duplicate your theme first and making the changes on the duplicate. This will prevent any errors from occurring on your live site. We also recommend adding CSS to the bottom of the file as opposed to altering the preexisting code. The new code will overwrite the previous code.

 

  • Go to Online Store > Themes > Current Theme > Actions > Edit Code.
  • Open the Assets folder > theme.scss.liquid.
  • Scroll to the very bottom of the file and add the following code:
@media only screen and (min-width: 750px){
.featured-slider__slide-content {
    padding: 64px 0;
}}
  • The 64px is the padding on the top and the 0 is the padding for the bottom, to further reduce the space reduce 64px to a smaller number.
  • Click Save.

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

 

All the Best,

Bo

 

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes