Section size is different on Mobile and PC

[blossomvase]

Hi.

The app I used to make this section is called “Instant”.

1. As you can see, on PC, the slide images are not too frame and look zoomed in. But on Mobile they are sized fine and look great.

2. Additionally, on PC, the padding between the heading (“5000 + Orders etc”), and the above section, it looks way too close. But on Mobile, it looks perfectly fine.

If I could please some help with one of the issues, or both, that would be great.

I just want the PC display to look the same as the mobile display, thanks.

Store URL is blossomvase.com

[TheScriptFlow]

Hey @blossomvase this require custom coding. If you don’t mind share collaborator access code so that I send you request for theme. It would be easy for me to solve it.

Thanks

[DaisyVo]

Hi @blossomvase

I can’t see this part in the Home page, could you please share with me the page on the screenshot?

Best,

Daisy

[websensepro]

Hi @blossomvase

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(min-width:768px){ 
.instant-rich-text.ijr99nHLVEsCVZRzs {
    margin-top: 42px !important;
}
.__instant.itC65dYZ7rJHy9n8B .icLdxf2nXYWk5XU1t {
    padding: 64px 31px !important;
}
}

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[blossomvase]

https://blossomvase.com/products/the-brilliance-board

[blossomvase]

Thank you very much that fixed the text/padding issue.

If possible, would you know the solution to the images not being framed/sized correctly. The images in their orignal size are 1000x1000 px.

Thanks. Product page URL: https://blossomvase.com/products/the-brilliance-board

[websensepro]

@blossomvase

Which image are you talking about? Please give me a screenshot.

[DaisyVo]

Hi @blossomvase

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 1024px){
.__instant {
    margin-top: 30px !important;
}
}

Here is the result:

This code to increase the space between the text and the section above. The image keeps auto-scrolling, so I can’t check the code properly. Can you check it with this app, or make it stop scrolling so I can check it?

Best,

Daisy

[blossomvase]

It is these images, under the “5000+ orders” heading:

They appear to be out of frame, and are not sized correctly.

[blossomvase]

Hi Daisy. I have stopped the image from auto scrolling, so it should be frozen.

[blossomvase]

Hi @websensepro , did you have any success with this yet?