Re: Section size is different on Mobile and PC

Section size is different on Mobile and PC

blossomvase
Excursionist
20 1 6

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 

Screenshot 2025-01-03 194806.pngScreenshot 2025-01-03 194712.pngScreenshot 2025-01-03 194648.pngScreenshot 2025-01-03 194639.png

 

Replies 10 (10)

qasim-devloper
Shopify Partner
170 12 23

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

- Need a Shopify Specialist? Chat on WhatsApp +923289643774

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


- If my solution was helpful, mark it as a solution and hit the like button!

DaisyVo
Shopify Partner
3690 403 489

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

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
DaisyVo
Shopify Partner
3690 403 489

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: image_720.png
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
Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution
blossomvase
Excursionist
20 1 6

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

websensepro
Shopify Partner
1854 215 261

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!

 

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
blossomvase
Excursionist
20 1 6

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
Shopify Partner
1854 215 261

@blossomvase 

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

Need a Shopify developer? Hire us at WebSensePro For Shopify Design Changes/Coding
For Free Tutorials Subscribe to our youtube
Get More Sales Using Big Bulk Discount APP
Create Your Shopify Store For Just 1$/Month
Get More Sales Using Big Bulk Discount APP
blossomvase
Excursionist
20 1 6

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

blossomvase_0-1735923764082.png

blossomvase_1-1735923783467.png

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

 

blossomvase
Excursionist
20 1 6

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