Remove white space between product image and description on MOBILE (Dawn)

Technical Q&A
1

I am using Dawn theme.

The product page looks fine on Desktop, but it needs to be fixed on mobile.

https://thetechvibe.us/products/creative-fidget-hand-spinner-toy-anti-stress-fingertip-gyro-ballpoint-pen-with-led-light-students-child-stress-relieve-s

On mobile there is too much space between the first image and the description. My fear is that customers will not stay for long when it looks like this.

How do I remove this white space so that the image and description are in the same area?

unnamed (5).jpg
unnamed (5).jpg1170×2532 94 KB

2

Please try to navigate to Customize theme section and choose mobile device type to preview the changes you would perform. Then you should overlap the header section and try to change the logo size and margins there.
Please reach out if you need any assistance with the theme setup and coding.

3

Hello,

You can adjust that through custom CSS. Adding the below CSS at the end of your base.css file should address your inquiry.

@media (max-width:768px) {
.slider.slider--mobile .slider__slide {
  max-height: 500px !important;
}
}

GabrielS_0-1666556564320.png
GabrielS_0-1666556564320.png619×1184 149 KB

Cheers!

4

Thank you!

Now that definitely helped, however now it’s a strange swipe effect on mobile and it’s a bit clunky.

Still some leftover space.

If you look at the other product on my website on mobile it looks just how I want it to.

https://thetechvibe.us/products/portable-aroma-diffuser-simulation-flame-usb-ultrasonic-humidifier-home-office-air-humidifier-aromatherapy-flame-lamp-difusor

5

Actually I figured it out. The video file was making the rest of the images have to stay in the same alignment, or something. I’m not a coder so I have a tough time articulating what I’m seeing. But it’s all good now.

Thanks again!