Responsive design issue

[ctpweb]

Hi all,

I’m experiencing some issues with my website responsive design. You can view the site on http://www.onderdedraak.be. When you check it on a smartphone there is a white space on the right that makes it possible to scroll left and right, and that’s not the intention of course. However, I have no idea what is causing this issue.

Can you guys have a look? Thanks!

[Paulie_D]

You have this

Which might be affecting the minimum widths.

[ctpweb]

I can’t find this div at first sight

[Sarfaraj]

your code

.tp-bullets.tp-thumbs .tp-mask .tp-thumbcontainer {
width: 5000px;
position: absolute;
}
.tp-bullets.tp-thumbs .tp-mask {
width: 500px;
height: 50px;
overflow: hidden;
position: relative;
}

all style called in js so change the width on your js file.

this issues is a slider.
issues in setting.css file and another js inherited to style attributes.

[ctpweb]

Okay I found the code in settings.css, but what do I have to change to solve the problem? I changed the width to 100px as a test, but nothing changes.

[Sarfaraj]

first of all you find automatically called height because js called directly height so he not displayed in HTML code.
and check the inspect element threw height in your browser.
I hope you get mistake.
I also give you your code as above so check first code then do the changes.

[ctpweb]

I found out that the code above was cauded because of the slider thumbnails navigation. I removed this navigation, so it seems to be a lot better now. But still I can scroll right and left on a smartphone..

[Sarfaraj]

ok done give me link final updated

[ctpweb]

what do you mean? check http://www.onderdedraak.be on a smartphone, you can still scroll left and right. there seems to be a space on the right, maybe caused by the slider?

[Sarfaraj]

Now all issues is Done replace below code in your css and then check.

.sk_wrapper {
background: url(http://www.onderdedraak.be/gfsb13/wp-content/themes/odd/images/footer_shadow.png) no-repeat;
background-position: 50% 0px;
width: 86.8%
padding-top: 40px;
}
.logoMarginTop {
margin-top: -80px;
}

[ctpweb]

I added this to my css for smartphones:

@media (max-width: 480px) {
.sk_wrapper{
width: 86.8%;
}
}

The width is smaller now and seems to fit, but still there is some space on the right which makes it possible to scroll horizontally

[Sarfaraj]

Remove the **margin-left:15px;** in this class **.logoMarginTop**
I also mention to you in above code.
you remove margin-left then checked in your device.

[ctpweb]

awesome, that did the trick! thanks sarfaraj!

last question: can you take a look at the footer? I just can’t get the footer to display correctly on the website, you can see that it’s cropped (problems with height). On an iPad and smartphone it doens’t display correctly either and there seems to be an issue with the shadow. Can you help me out there? Thanks a lot

[Sarfaraj]

Can you give me screenshot of footer.

[Sarfaraj]

Hey @ctpweb
I have finally solved your footer shadow image solution.
Just you add below code in you css as you want in background image in footer.

background-size:contain;

[Author]

Posts