I’m using Smart Slider on my site and embedded it using Classic HTML. Is there a way to remove the top and bottom padding on this section so that it actually fills the section?
Hello @marketimpress,
Thanks for writing in!
Can you please share the login details in secure note so we can take a closer look. I see coming soon message active on the website.
Thanks.
Of course, please see secure note.
Hello @MarketImpress,
Thanks for providing the access.
Actually the spaces above and below your smart slider is because you have added 5%
and 3%
(top bottom left right) padding in the section.
Setting the padding to 0
will resolve your issue.
If you need anything else, please let us know.
Thank you, that worked perfectly.
You’re welcome!
Thanks for letting us know that it has worked for you.
One other question, dealing with the same issue. How can I get my images to extend to fill the entire screen left to right like my slider now does.
For example, see Attorney Page, would like to have the top graphic extend across the entire screen as the dark blue bar does at the very top.
Hi @marketimpress,
You can change the Page Template to a Blank - No Container template.
Then to set sections to cover the full width of the page, edit the Row settings and disable the Inner Container option.
Hope this helps.
Thank you, that worked and it is now extending full width.
Is there a way to force it to display full height and still be responsive? Right now it cuts off quite a bit of the image.
Hello @marketimpress,
There might be a way to display full height image. It may have a Pros and Cons though. I would like you to try this demo here: https://davidwalsh.name/demo/background-size.html which would explain how background image works.
We use the
background-image: cover;
which would cover the whole area of the container. This is responsive enough which will always covers the whole area. The only thing to consider here is that if your image size is smaller, it will be stretch out and if you have a bigger image, it will get cut off.
Yes we can use
background-size: 100% 100%;
which is also responsive but your image will either be stretch out or get squeezed depending on the size of the container.
Yes we can also use
background-size: 100% auto;
but then as soon as you resize your browser or on smaller screen sizes, you will probably have white spaces around the image.
Or we can also use
background-size: contain;
but then this is not a good choice because you will see white spaces around your image.
Hope this helps.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.