Remove extra space between sections on phone preview. Laptop preview is perfect

Store Design
, ,
1

I am working on autixir theme. My mobile preview is a bit disturbing because of extra spacing. How can i remove this space while not disturbing my laptop preview as its perfect.

2

To customize only mobile view, you can use CSS media queries.

For example:

@media only screen and (max-width: 600px) {
  body {
    your code here
  }
}

If you want us to provide the complete code, kindly share your store’s URL

3

https://buy4lessus.com

4

Hi @mahasobhi047 ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file style.css

Step 3: Paste the below code at the bottom of the file → Save

@media(max-width:767px){
.ltn__slide-item{
padding:0 !important
}
.slide-item-info-inner{
margin-bottom:0 !important
}
}

PageFlyOliver_0-1692852300887.png
PageFlyOliver_0-1692852300887.png744×1330 89.4 KB

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

5

Hey @mahasobhi047

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

6

Hello @mahasobhi047

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > theme-custom.css and paste this at the bottom of the file:
@media(max-width:992px){
.ltn__slide-item{
padding:0 !important
}
.slide-item-info-inner{
margin-bottom:0 !important
}
}

ZestardTech_0-1692854052740.png
ZestardTech_0-1692854052740.png1217×874 102 KB

7

Hello @mahasobhi047

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme-custom.css>Add this code at the bottom.

@media (max-width: 768px){
.slide-item-info-inner.ltn__slide-animation {
    padding: 0 !important;
}
}