Mobile Responsive issues with Altitude theme

[[email protected]]

Hi everyone - I am having a very complicated time with the Altitude theme. On my computer, it looks amazing, but on tablet and phone, the gap between page 1 and page 2 is unbelievably huge. I can't seem to close it, no matter what I do. I am using the Genesis Responsive Slider on page 1. I have tried decreasing the height of the background image on page 1, but all that does is distort my image. I am also working with a wordpress developer and she is just as lost and confused as I am as to why this is happening. Can anyone help me out here?

http://03cad97.netsolhost.com/wordpress1/

[itzsnider]

When checking it out the following class="image-section" is set to height: 667px;

That is your problem, not sure where in the code it is making it setup but that is your issue.

Even using a margin-bottom:-400px; wouldn't work in the div itself.

[[email protected]]

Hi Matt - thanks for the help! I couldn't find where that height 667 px, but it helped me sherlock out the problem. I used \

#front-page-1 .image-section {
height: 500px !important;
}

And it seems to have worked like a charm!

But now another small issue. I've set up the Responsive slider and tried to eliminate the borders around the images. I've almost succeed, but there's still a white border at the bottom of my images. Any ideas? I used:

.slide-excerpt-border {
border: none !important;
}

#genesis-responsive-slider {
border: none !important;
padding: 0 !important;
}

[[email protected]]

Strike that. I got it! 🙂

.slide-excerpt-border {
border: none !important;
}

#genesis-responsive-slider {
border: none !important;
padding: 0 !important;
}

.home #front-page-1 .flexible-widgets {
padding-bottom: 50px;
}

.home #front-page-1 .image-section {
height: auto !important;
}

.home #front-page-1 .widget.genesis_responsive_slider {
margin-bottom: 0;
}

.home #front-page-1 .widget.genesis_responsive_slider ul li {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}

@media only screen and (max-width: 1023px) {
.home #front-page-1 .flexible-widgets {
padding-top: 30px !important;
}
}

[Author]

Posts