White bar on mobile devices

You have a static width applied inline to your logo image (480px), this is forcing the width of your site to be wider than what is viewed at mobile widths.

Remove this inline width and it should display correctly.

Hope this helps.

Thanks for your help!

I have removed the static width. But now the logo is to big on mobile devices and the white bar is still visible.

• This reply was modified 8 years, 4 months ago by gunnarzw.

Try adding this to your Child Theme style.css file, or using a Custom CSS plugin.

@media only screen and (max-width: 420px) {
    .logo {
        width: auto !important;
    }
    .portfolio_item_img img {
        width: 100%;
    }
}

This should fix your logo to stop it from displaying too wide for the viewport, and expand your single-column portfolio images to fill the viewport also.

Hope this helps.

Thank you so much! It worked! I have just one more question:
If I open a portfolio page, the text on that page is displayed next to the video on an iPhone 6, on my iPhone 5 the text is displayed underneath the video. When it is displayed next to the video there is not enough space to read the text properly. How can I fix this?

Thank you!

@media only screen and (max-width: 568px) {
    .single-port .row .span4, 
    .single-port .row .span8 {
        width: 100% !important;
        margin-left: 0 !important;
    }
}

The theme is already using !important which is problematic as we’re forced to use it ourselves to try to override it, the above code should force your columns to expand to full-width at a wider viewport.

Hope this helps.

Thank you for your reaction!

Well it worked for the portfolio pages.But now the ‘normal’ pages are to wide: https://gunnarzwart.nl/over-mij

Thank you! You’re really helping me out, I’m already really long struggling with this problem!

Your theme is defining many fixed widths for your container at a variety of widths, your content is overflowing it quite a lot.

It’s a little hack-ish, but you can rectify this by adding this to your custom CSS.

@media only screen and (max-width: 1240px) {
    .container {
        width: 90% !important;
        padding: 0 !important;
    }
}

This will force your main container to become more flexible.

Hope this helps.

Adding the last code to the CSS won’t really help.

But I find out the without the last code you send me the site works fine on an iPhone 5(S). On an iPhone 6(S) the site also works fine, only the page https://gunnarzwart.nl/over-mij doesn’t look good. So the homepage and portfolio pages items look also good on the iPhone 6 (S), only the ‘normal’ pages are wrong.

Can you help me out?

Thanks!!

You can try changing the code so it doesn’t affect mobile device widths instead.

@media only screen and (min-width: 769px) {
    .container {
        width: 90% !important;
        padding: 0 !important;
    }
}

Well thank you for your reaction again!

I tried to use your the codes you made for me but it still won’t really work out. Do I need to copy and paste all of your codes into my themes css or just one?

I didn’t work for a time on my site so I hope you can help!