Mobile Slider leaves blank space above and below

Hello,

I am working with the Sydney Theme locally while I build my site (so I cannot give you a link).

I have adjusted the slider on the desktop version to be below the menu bar, and have moved the logo to the left of the menu bar. I then changed the mobile to show the full width of the slider images without resizing them or clipping them, but it leaves big white spaces above and below the slider image which I’ve been struggling with for days on end now with all sorts of codes.

Here is the CSS I have used for mobile so far (taken from a variety of support threads):
@media only screen and (max-width: 900px){
#slideshow{
height: 400px !important;
}
}

@media only screen and (max-width: 600px){
#slideshow{
height: 210px !important;
}

.text-slider-section{
top: 40%;
}

#slideshow .slides-container .slide-item{
background-position: top center !important;
background-size: 100% !important;
}

It now has more than a page of white space on mobile between the bottom of the slider and the title “Home”, and above it is also a large margin of space, and the text which is meant to be on the slider is now underneath the image in the blank white space.

Please help, it’s very frustrating.

Thanks =)

I have managed to fix the above issue by changing settings on SiteOrigin rows.

The new issue now is that the tablet slider cuts off the image halfway through - how do I set the height but don’t change the mobile phone version?

Hello there,

Could you please share your site URL here, so I can be more precise?

Regards,
Kharis

Hi Kharis,

As mentioned in my post, I am hosting it locally so I cannot give you a link. I don’t know how to add images here so I can’t show you screenshots either :confused:

Since I posted, I removed all the mobile code and just added the following:
@media only screen and (max-width: 767px) {
.roll-button {
padding: 5px 15px;
}
}

/make the media slider full size/
@media only screen and (max-width: 900px){
#slideshow{
height: 400px !important;
}
}

@media only screen and (max-width: 600px){
#slideshow{
height: 210px !important;
}

.text-slider-section{
top: 40%;
}

}

#slideshow .slides-container .slide-item{
background-position: top center !important;
background-size: 100% !important;
}

/attempt to fix white space/

@media only screen and (max-width: 991px) {
.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 767px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 479px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 320px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

/* tablet landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (min-width: 1930px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 1199px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 1024px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 780px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

The other custom CSS I added was this:
.slides-container .slide-item{
background-position: 50% 70px !important; /87px/
height: 100% !important;
}

.header-slider{
margin-top: 70px;
}

.site-header { background-color: #1c1c1c;}

.site-header.float-header{
padding: 20px 0 !important;
}
.site-logo { position:absolute;
top:25%;
left:0%;
}

.site-header .container{
width: 95%;
}

/* remove the major padding around the footer */
.footer-widgets {
padding: 10px 0; background-color: #1c1c1c;
}
.site-footer{
padding: 0px 0;
}

.widget-area .widget {
margin-bottom: 1px;
padding-top: 0;
}

/* move the title word of page up to remove blank space */
.page-wrap {
padding: 83px 0 100px;
clear: both;
margin-top: 10px;
}

element.style {
padding: 0px 0px;
}

/* remove the weird spacing and edit button on the site home page */

.page-id-27 #post-27,
.page #content .content-wrapper,
.page-id-27 #content {
padding-bottom: 0;
padding-top: 0;
}
.page-id-27 .entry-footer {
margin-top: 0;
}

.page #content {
padding-bottom: 0;
padding-top: 0;
}

/* change H1 font size */

.hentry .title-post {
font-size: 40px;
font-weight: 600;
line-height: normal;
padding-bottom: 0px;
margin: 0px;
}

.site-info.container {
display: none;
}

My issue now, is that the desktop slider image is no longer below the menu like I had originally placed it but is now cut off by the menu background I created. On tablet view it seems perfect but on mobile phone view there is still a white space below the start of the Home section I created with SiteOrigin. I have made the site origin rows with a 0 padding at the top and no top margin but still this space exists.

Please help

Hello there,

For screenshot taking, you can use the Awesome Screenshot, an extension for web browsers (Firefox and Chrome).

Regards,
Kharis

Hi Kharis,

I have screenshots. My issue is how to post them here?

You can upload it here https://postimage.io/ and share its link here.

Desktop View

Mobile view

Tablet View

Hello there,

Thank you for the screenshot. It isn’t default look of Sydney’s main slider. Did you apply any custom CSS code to modify it?

Regards,
Kharis

Hi Kharis.

I am getting really irritated. Please READ what I have sent in my actual query and you will see I posted ALL the custom CSS I have added!

I CLEARLY stated that I added this custom CSS:
.slides-container .slide-item{
background-position: 50% 70px !important; /87px/
height: 100% !important;
}

.header-slider{
margin-top: 70px;
}

.site-header { background-color: #1c1c1c;}

.site-header.float-header{
padding: 20px 0 !important;
}
.site-logo { position:absolute;
top:25%;
left:0%;
}

.site-header .container{
width: 95%;
}

/* remove the major padding around the footer */
.footer-widgets {
padding: 10px 0; background-color: #1c1c1c;
}
.site-footer{
padding: 0px 0;
}

.widget-area .widget {
margin-bottom: 1px;
padding-top: 0;
}

/* move the title word of page up to remove blank space */
.page-wrap {
padding: 83px 0 100px;
clear: both;
margin-top: 10px;
}

element.style {
padding: 0px 0px;
}

/* remove the weird spacing and edit button on the site home page */

.page-id-27 #post-27,
.page #content .content-wrapper,
.page-id-27 #content {
padding-bottom: 0;
padding-top: 0;
}
.page-id-27 .entry-footer {
margin-top: 0;
}

.page #content {
padding-bottom: 0;
padding-top: 0;
}

/* change H1 font size */

.hentry .title-post {
font-size: 40px;
font-weight: 600;
line-height: normal;
padding-bottom: 0px;
margin: 0px;
}

.site-info.container {
display: none;
}

And added this for mobile:

@media only screen and (max-width: 767px) {
.roll-button {
padding: 5px 15px;
}
}

/make the media slider full size/
@media only screen and (max-width: 900px){
#slideshow{
height: 400px !important;
}
}

@media only screen and (max-width: 600px){
#slideshow{
height: 210px !important;
}

.text-slider-section{
top: 40%;
}

}

#slideshow .slides-container .slide-item{
background-position: top center !important;
background-size: 100% !important;
}

/attempt to fix white space/

@media only screen and (max-width: 991px) {
.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 767px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 479px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 320px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

/* tablet landscape */

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (min-width: 1930px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 1199px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 1024px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

@media only screen and (max-width: 780px) {.slides-container .slide-item {
background-position: 100% 0px !important;
height: 450px !important;
}

.header-slider {
margin-top: 0px;
height: 450px !important;
}

.text-slider-section {
position: relative;
top: 70%;
}

}

Hello there,

What is your slide image size? By knowing it, I can reproduce it on my test site with your CSS styles.

Regards,
Kharis

Hi Kharis,

The images are both about 1920 x 1280.

Thanks =)

Hello there,

I would like to apologize in advance for the delay as it took some time to code. Please remove all of custom CSS code associated with header height modification, and then use this one instead.


@media only screen and (max-width:1023px){
    #slideshow .slides-container .slide-item {
        background-position: top center !important;
        background-size: 100% !important;
    }
}

@media only screen and (min-width:980px) and (max-width:1023px){
    #slideshow {
        height: 655px !important;
    }
} 

@media only screen and (min-width:800px) and (max-width:979px){
    #slideshow {
        height: 535px !important;
    }
} 

@media only screen and (min-width:768px) and (max-width:799px){
    #slideshow {
        height: 512px !important;
    }
}

@media only screen and (min-width:640px) and (max-width:767px){
    #slideshow {
        height: 430px !important;
    }
} 

@media only screen and (min-width:480px) and (max-width:639px){
    #slideshow {
        height: 323px !important;
    }
} 

@media only screen and (min-width:360px) and (max-width:479px){
    #slideshow {
        height: 244px !important;
    }
} 

@media only screen and (min-width:320px) and (max-width:359px){
    #slideshow {
        height: 215px !important;
    }
} 

Regards,
Kharis

Hi Kharis,

I still have the same problem. The menu without the black bar behind it cannot be read, and on mobile it still gives me the strange spacing I was talking about.

Please assist

Hello there,

Thank you for the followup. In order to track the progress easier, please temporarily put off all of your custom CSS code except the one I suggested.

Regards,
Kharis

Hi Kharis,

That’s what I did and as I mentioned I still have the spacing issue and with your code there is no black background to the menu so it cannot be read well.

I have figured out that it is the changing the slider image on mobile to show the full image which creates the massive blank space below the image and moves the wording all wrong - my guess here is that the slider container is not decreasing in height according to the image height - how do we fix that?

It is this section of my code that creates a thin white line above the slider image on mobile:
.slides-container .slide-item{
background-position: 50% -100% !important;
height: 100% !important;
}

.header-slider{
margin-top: 70px;
}

.site-header { background-color: #1c1c1c;}

.site-header.float-header{
padding: 20px 0 !important;
}

Again, I’m unsure how to change that on mobile because essentially I know I’m shifting the slider image down but I’d like this change to only be on desktop?

Thanks

Hi

Hello there,

I would like to apologize in advance for the delay.

> It is this section of my code that creates a thin white line above the slider image on mobile:

What is the resolution of your mobile device?

Please visit this site http://www.whatismyscreenresolution.com/.

By knowing it, I’m probably able to be more precise.

Regards,
Kharis

Hi Kharis,

On all mobile device views. I use the “Customise theme” button and click on the tablet and mobile view on the bottom. Otherwise, I right-click on Inspect and click the mobile view at the top on its default setting.

Also please respond on how to fix the big blank space below the image that your code also produces?

Regards
Petra