Return to previous page

Too much padding between menu and slider with Full width slider

This topic has 19 replies, 2 voices, and was last updated 6 years, 10 months ago ago by Rose Tyler

mattiash

Participant

November 14, 2017 at 07:11

Hi,

I imported demo content using homepage one. I decided to use Homepage 3 (with the wider slider).
I still wanted to use the “Free shipping on orders over $199” information etc.
On homepage 3 that is not included.

To add this I copied the code in WPBakery from Homepage 1 and put in Homepage 3.
The slider is implemented in WPBakery on homepage 1 but not in homepage 3 where it is an option for the page (tick box). To be able to get the “Free shipping on orders over $199” I had to replicate same structure as in Homepage 1.

But I get this massive spacing between the menu and the “Free shipping on orders over $199” now.

I tried to just change the slider on Homepage 1 to see if I messed something up, but still get the same big space with Homepage 1.

So the question is:
What do I need to do to get rid of the spacing using a slider (full width)?
Also the sticky header is not working, perhaps it has something to do with this issues or something else?

Please, contact administrator
for this information.

#177508 Copied Theme version: 1.0 child theme 3.4 main WooCommerce version: 3.2.3

18 Answers

Rose Tyler

Support staff

November 14, 2017 at 08:50

Hello,

I’ve added http://prntscr.com/ha7dry (https://visualcomposer.io/article/paddings-margins-borders-radius/) and added this code in Custom css for page http://prntscr.com/ha7e58 and this one http://prntscr.com/ha7ekb for first text element on the page. Please check http://prntscr.com/ha7ede
and enabled fixed header in Theme Options > http://prntscr.com/ha7dip
Let us know if you need any further assistance.

Regards

#177514 Copied

mattiash

Participant

November 14, 2017 at 11:22

Thank you

#177553 Copied

Rose Tyler

Support staff

November 14, 2017 at 11:23

You’re welcome!

Regards

#177554 Copied

mattiash

Participant

January 12, 2018 at 13:00

Can i re-open this again or do I have to make a new post?

I created a row and the homepage, I added CSS code to hide it for all devices but mobile (I want to use a static image instead of Revo slider on Mobile Devices).

Now the gap has returned, I have tried to disable the row and then the gap is gone again.

I can see that vc_column-inner has a padding of 35px (see image https://1drv.ms/i/s!AvAJIhA_ZQ6wjgzrhz2xFvD2K4mw ) that I have tried to remove with:
.vc_column-inner {
padding-top:0px;
}

It seems like even if it is hiding the content for all devices but mobile it seems to keep something in there…..

Thank you

#181727 Copied
Rose Tyler

Support staff

January 12, 2018 at 14:12
Hello,

Please do not use code like this
```
.vc_column-inner {
padding-top:0px;
}
```
on mobile the gap created by margin-bottom of this row http://prntscr.com/hzgbv2
so you need to add a custom class (because of it is a bad practice to write code for default VC classes, like vc_column-inner, without using your custom class) for this row and write css code to make margin-bottom = 0.
If you provide me wp-admin access in Private Content I can help you with this, because of the previous credentials are incorrect now.

Regards
#181739 Copied
mattiash

Participant

January 13, 2018 at 03:21

Okay, thank you, I have provided the details.

Regards

Please, contact administrator
for this information.

#181767 Copied

mattiash

Participant

January 15, 2018 at 08:16

While you check the gap hopefully you can help me with an an issues with font awesome. I am trying to use the font awesome icon “fa-etsy”. The shortcode or the full codes isn’t working to display the icon….any idea of why that is? Maybe I have to update the font-awesome link to import newer icons?

I have tried these in a normal text block (text tab activated).
 
 
[icon name=”etsy” Size=”20″ Color=”#fc5a5a”]

I notcied the etsy icon is not listed here: https://www.8theme.com/demo/legenda/shortcodes/icons/

This is the version I have: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

I noticed that Font Awesome 5.0.4 is out but not with the boostrapcdn version

Any ideas?

#181822 Copied
Rose Tyler

Support staff

January 15, 2018 at 10:30
Hello,

1. I’ve checked your page content and see that you already have a custom class for needed row http://prntscr.com/i0ma6d in this case you may add this code in style.css file of child theme or in custom css for page:
```
@media only screen and (max-width: 480px) {
.no_padding {margin-bottom: 0 !important;}
}
```
Please try to do it. Of course, you may change the custom class name in page editor and in code.

2. Please provide FTP access in Private Content.
Thanks in advance.

Regards
#181847 Copied
mattiash

Participant

January 15, 2018 at 12:58

1. Thanks, I tried to apply this already in CSS. It appears the gap appears in full resolution too, so I don’t need the media only max-width 480px part. However, it still doesn’t work. I am not sure it is applied correctly in the row or is it? I can see the CSS is working for the margin but I’m not sure it is applied to the correct element….

2. Ok

Please, contact administrator
for this information.

#181868 Copied

Rose Tyler

Support staff

January 15, 2018 at 13:39

1. I’ve checked your site and looks like the code works fine http://prntscr.com/i0orvg and http://prntscr.com/i0os0e
Do not forget to clear cache before checking.
2. I’ve uploaded missing fontawesome fonts, so now all icons should work fine.
Where you want to use fa-etsy icon? make sure that you do it correctly http://fontawesome.io/icon/etsy/

Regards

#181874 Copied

mattiash

Participant

January 16, 2018 at 03:38

Hey Rose,

1. So yes it is working for mobile as per the second image. The gap is still there on the full width as per the first image.

2. Thanks! Can I ask what you changed? I can include the icon now. However I run into an issue trying to use it with a URL in my Static block “Footer” – Follow Us section where the tag disappears every time I save it in VC. So the Icon appears, but VC strips the tag.

This is the code I am trying to add:
<li><a href="https://etsy.com" target="_blank" rel="noopener"></a></li>

After I save it I end up with:
<li></li>

Thanks

#181982 Copied

Rose Tyler

Support staff

January 16, 2018 at 08:45

Hello,

1. Please provide screenshot for better understanding.
2. I uploaded missing fonts via FTP.
Try to use “Raw HTML” VC element instead of the Text element.

Regards

#181990 Copied

mattiash

Participant

January 16, 2018 at 09:57

Hey,

1. This is the picture with the gap/white space between the slider: https://prnt.sc/i0orvg

2. Ok thanks, I added a RAW element and saved it. But the 8theme VC Icon code doesn’t work in RAW Html for my existing Icons. I then tried to use the textblock again and VC saved all the code this time and it’s working!…bit buggy. Now I come across another problem: By not using the VC Icon code i end up with a big top padding on the Etsy icon. But only for the Etsy icon. This moves my icon way to far down than what I initially had. You can tell by hovering over the E icon that it is causing the big gap/white space above.
https://1drv.ms/i/s!AvAJIhA_ZQ6wji22OF1jqT6kZaaQ

Thanks!

#182013 Copied
Rose Tyler

Support staff

January 16, 2018 at 16:14
Hello,

1. Please try to set 0 as on this screenshot http://prntscr.com/i18vwr
2. Try to use this custom css code:
```
.social-custom br {
 display: none;
}
```
Regards
#182081 Copied
mattiash

Participant

January 19, 2018 at 04:17

1. I tried it and it didn’t work. I believe that the if there was an issue with the top padding we would see that in the mobile version to right? It looks like that the vc_column-inner need to have 0 top margin or padding…but we already tried that with a custom code I

2. That worked perfectly!

#182296 Copied

Rose Tyler

Support staff

January 19, 2018 at 13:08

Hello,

Please check your Home page now http://prntscr.com/i2mjrx I’ve set 0 as on screenshot from the previous reply.

Regards

#182367 Copied

mattiash

Participant

January 20, 2018 at 07:40

Hey Rose,

Thanks, I must of missed to add that value to the Revo element and put it to the row instead, which of course wouldn’t have made a difference.

Looking all sweet now. Thank you!

#182488 Copied

Rose Tyler

Support staff

January 22, 2018 at 08:12

Hello,

You’re welcome!
Have a nice day.

Regards

#182553 Copied
Tagged: full width slider, menu padding, themes, woocommerce, wordpress
Viewing 19 results - 1 through 19 (of 19 total)