Docs

[GodisHoly88888888]

Hello, at: http://www.raptureofthebride.com – on a smaller screen size, the picture with Revolution Slider (that is behind the nav bar/masthead on a bigger screen size, {which fits correctly}) doesn’t format properly. The picture is too low in the screen.

You all gave me a Css code, that works good on a bigger screen, but I need a code for smaller screen sizes too.

Be thankful for help,

Thanks,

Victor

[Christopher]

Hi there,

Please add this code in customizer :

@media (max-width:480px){
.x-slider-container.below {
    margin-top: -34px;
}
}

Hope it helps.

[GodisHoly88888888]

Hi, Thanks for the code, didn’t help though : )

I’m looking on a tablet size device and there’s a small space at the top & bottom where the picture is short of full screen.

At the top of the screen too with the tablet, where it says: Welcome To: RaptureofTheBride.com, the top bar area, has got a white overlay or something – (Is that section called something, so that I can change it)?

This is a code I have in CSS currently:

@media(min-width: 80px){
.masthead {
height: 0;
}
}

(I changed the pixel min-width to 80 — it was 980 before it may of been)

Hope to hear from you, seems like an easy fix.

Thanks,

Victor

p.s. any chance to get the full picture (viewable area image, {with Rev. Slider}) to show up on smaller screens as with the bigger screen — Only part of the picture is showing on the tablet, when the tablet is upright {vertical} — when it is viewed horizontal, the picture is a lot better.

[Nico]

Hi There,

Little not sure what space or white overlay something. Would you mind sharing us a screenshot of it so we could easily locate and identify it.

In regards to the PS, Would you mind sharing us your admin credentials so we could check your setup closer.

Don’t forget to set it as private reply.

Thanks.

[GodisHoly88888888]

This reply has been marked as private.

[GodisHoly88888888]

Hello — top of screen

[Paul R]

Hi Victor,

Try setting your image as a background image instead of image layer.

http://screencast.com/t/OVeC329bOtp7

Hope that helps.

[GodisHoly88888888]

Hi Thanks for the message,

I may of tried that setting before, I did change it to that, but still a no go with the top of the page. I tried using the css code above also with the Setting change, but a no go.

However that setting it may be, brought the rest of the screen into shape, except the top of the page.

[Friech]

Hi There,

You can add this under Custom > CSS in the Customizer.

@media (max-width:  480px) {
	.x-slider-container.below {margin-top: -6em;}
}

Hope it helps, Cheers!

[GodisHoly88888888]

Hi, Thank you for the css code – but the code didn’t adjust the picture — I still have a small space at the top of the screen and there is a space at the bottom of the screen, where the picture doesn’t reach. (From checking with a Tablet)

Victor

[Christopher]

Hi there,

Upon checking your sitebyou didn’t add the code we provided in previous replay. If you add provided code you should get the result like attachment.

Thanks.

[GodisHoly88888888]

Hi, thanks for the meessage, I have the css code at the site now, but no change. (was there before, but I deleted)

I’ve tried all different combinations — On the Tablet I’m using: Samsung Galaxy, (the screen may be: 1024 x 600) there is a white space (gap) at the top and bottom of the screen. (cleared caches on the desktop/tablet too)

On the desktop computer, I re-sized the browser window to a lot of different sizes and the image sets good in a lot of the sizes, but on some there’s a space.

Also, with the image above, the white area at the top of the screen, is that a setting I can change in Customizer?

Thanks,

Victor

[GodisHoly88888888]

(when I first signed into Customizer > Custom > Css — I got a good picture(s?) as the one above from Christopher it may of been, [using the small computer icon(s)] but when I added the last code above, I got the space again, even after deleting it may of been)

[Paul R]

Hi Victor,

I tried setting your image as background image and the gaps are gone regardless of screen width.

By setting it as an image layer, the image height decreases as the width decreases maintaining proportion but also creating a gap.

So the solution is to set it as background image and make it cover the entire slider.

Thanks

[GodisHoly88888888]

Hello, I think it is fixed : ) I did have the Setting on Main Background (I must of), and probably changed it when trying different ways to fix it.

– The Tablet looks good –

There’s one thing with the top bar area, on the tablet (picture above) – there is a white area – how can I fix that? Is that a Setting in Customizer or a plugin?

Thanks,

Victor

[Author]

Posts