Hello,
I want to make a “welcome” page that has just one massive fullscreen image and a “go to shop” button. Basically a Hero image, but fullscreen.
My website: http://plazmatic.eu/welkom/
My theme: Shopisle
My experience: 0.00%, I’ve never built websites before and I do not know coding.
At first, I added CSS to the theme to make the width 100%:
@media (min-width: 1200px){
.page-id-38 #content .container {
padding: 0;
}
.page-id-38 .content-left-wrap.col-md-12 {
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
.entry-content {
margin: 0;
}
.container {
width: 100%;
}
}This kind of worked, but there’s white space between the image and the border of the screen. That’s problem one.
Problem two is that I just can’t seem to set the height. I’ve tried going Edit page > Hero Frames widget > Attributes.
There, I named the Widget Class ‘custom-hero-one’ and added the following code I found on another thread:
.custom-hero-one .sow-slider-image-wrapper {
height: 900px;
}This, however, doesn’t appear to do anything. There’s still a white space in between the header and the toolbar, and a huge blank space between the bottom.
So, how do I solve those two problems?
Thanks in advance,
Berend
Hi Berend,
To clarify, are you referring to this space?
If so, that’s your theme adding the space.
You can change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Add the following CSS
.page-id-106 .module { padding: 0; }You might also need to install the SiteOrigin CSS Editor.
Hi Berend,
Oh, and ideally we would recommend setting the height of the hero widget via the hero widget as doing it via CSS (and not forcing it) can lead to issues down the line (as we dynamically generate the height if it’s not defined in the widget). To do this open the hero widget and open the Design and layout settings group. Then simply set your unit of measurement and input your desired height.