Empty space above 1st row on mobile view

I am having this problem. Please check the screenshot. There’s an empty space above the first row of content.

Attachments:

You must be logged in to view attached files.

I think I fixed it.
I used the following code.
.main-page-wrapper { padding-top: 0px; }

Using this code messed the single product page image carousel. The upper part of the carousel as well as the picture in it were getting hidden under the header. So, I used the following code to fix that as well.
.container-fluid {margin-top: 30px; }

*Hope I used the right code and tag.

Hello.

To remove the empty space above the first row edit your home page with Wp-Bakery page builder and then click on the pencil icon to edit the top row which contains your slider. Then go to the second tab “Design Options” and put the margin as “-3px“. This will fix your issue and the upper space will removed.

Screenshot: https://screenshot.net/glzmnug
Result: https://screenshot.net/glrovsl

Best Regards.

No, it doesn’t work. I removed the previous codes that I used and put your codes in but it doesn’t do anything. Please check the screenshot.

Attachments:

You must be logged in to view attached files.

Hello,

You need to increase the margin to “-40px” and I said that you need to put the margin in the very first row but you edit the second row mistakenly.

Screenshot: https://screenshot.net/gyy8xhy

You can check in the below screenshot that when i used -40px top margin in the first row. The result is down below: https://screenshot.net/gmmlef7

Best Regards.

Okay, This time I did all that. But after applying the code the problem fixes for the mobile view but the slider in the top of pc view hides a small part of it under the header. Please check the screenshot.

Attachments:

You must be logged in to view attached files.

Hello,

To fix the view for the desktop screen. You have to set the carousel image size as full then the images will show fine on the frontend. At this time you have set the custom size for the images that is why it is sowing cut on the frontend.

Please see the screenshot: http://prnt.sc/p7ahw7

Best Regards.

I did use an image of my desired size and set the size to ‘full’. The problem is still there. screenshot1 is for the problem and the 2nd image is the one that I am using.

Attachments:

You must be logged in to view attached files.

Hello,

To fix this define your custom class in the Image Carousel element. Click on the pencil icon to edit the “Image Carousel” then add custom class in the “Extra class name” field as in the screenshot:
https://screenshot.net/614zxs7

Then paste the below css in your page css by clicking on settings icon and then hit “Save Changes” button:

.customRow{
     margin-top: 37px;    
}

I used the name of custom class as “customRow” you can use any other name for class.

Screenshot: https://jmp.sh/jJuvDAU
Result: https://jmp.sh/1VhJYgA

Best Regards.

It works. Thank you.

Sound’s Really Great!..

Feel Free to write back if you need further assistance, I’ll be more than happy to help you out.

Have a Fantastic Day.

Topic Closed.
Best Regards.

[Author]

Posts