Docs

[core365]

Hi, I’m currently working on a website and I’ve done a slideshow on the Home page and other pages have page title/headings in a blue band across the screen. I’ve made sure the slideshow displays correctly on mobile devices, however, when I view it on my iPad (landscape), it cuts the top and bottom off. This is also the same for the page titles on the other pages. I think this is down to the menu dropping under the logo and taking up more space, but I don’t know how to do it so it automatically pushes the slideshow and page titles further down the screen so they can be viewed correctly. It’s fine when I look at it portrait on my iPad as the mobile navigation button appears and gets around that problem.

I’ve attached 2 screen grabs for you to see.

The website is:
dms-fd.co.uk

Thanks!

[Rupok]

Hi there,

Thanks for posting with screenshots. It seems the logo is a bit bigger that pushing the menu in new line. You can fix this for small screen with media query.

Let’s add this under Custom > CSS in the Customizer.

@media only screen and (min-width: 980px) and (max-width: 1230px) {
.x-navbar-inner .x-container.max.width {
  width: 93%;
}

.x-brand img {
  margin-top: 25px;
  width: 200px;
}

.x-navbar .desktop .x-nav > li > a {
  font-size: 15px;
}

}

Hope this helps.

Cheers!

[core365]

Hi, that worked, spot on! Many thanks! Unfortunately though it didn’t fix the issue with the slider, as it’s still cutting off the top and bottom and the right side of it – it’s as though it isn’t resizing it. I’ve checked the settings in RevSlider and tried a few different things too, but nothing made a difference! I’d really appreciate it if you’d be able to give me any help with this. I’ve attached a screen grab for you to see.

Thanks!

[Joao]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thanks,

Joao

[core365]

Hiya, it’s the same website I was having issues with and the URL was in my original enquiry (June 14th), I didn’t realise you wouldn’t be able to see the original post I did, but the URL is:
dms-fd.co.uk

Thanks!

[Christopher]

Hi there,

Please add following code in Customize -> Custom -> CSS :

div#rev_slider_1_1_wrapper, div#rev_slider_1_1 {
    height: 1005px !important;
}

Hope that helps.

[core365]

Hi, I tried that out, but it makes the image really long, but I still have the problem with it being cut off at the top and the right side.

[Rupok]

Hi there,

Thanks for updating. Did you try changing the value? You can try this :

div#rev_slider_1_1_wrapper, div#rev_slider_1_1 {
  min-height: 500px;
}

Let’s adjust the value if needed. Hopefully it will do the job.

Cheers!

[core365]

Hi, yep, I tried altering the size of it previously but I still had the issue of the text going off the right edge of the screen on my ipad! I have no idea why it’s doing it as the circle above it is still centred as it should be, so I don’t know what’s happening with the text to make it off centre. I’ve attached a screen grab for you to see.

Also, on the home page, if you scroll down the page, there’s 3 boxes ‘Brick Defence, ‘Door Defence’ and ‘Sewage Defence’, when I view this on my ipad, the images for all 3 aren’t responsive and don’t keep inline with the column they’re in. I’ve attached a screen grab for you to see.

Thanks!

[Paul R]

Hi,

1. Please use slider below masthead instead of slider element.

http://screencast.com/t/GsmuTrVl2

2. To fix your boxes, you can add this under Custom > CSS in the Customizer.

.x-feature-box-graphic.square,
.x-feature-box-graphic.square * {
     width:100%;
}

Hope that helps.

[core365]

Hi,

1. I’ve done that, but the text is still cutting off on the right edge!

2. Brilliant, thanks!

Cheers

[Rupok]

Hi there,

Thanks for writing back. I have already provided the right solution (#1043525), you just need that to apply for smaller screens.

Let’s try adding this

@media only screen and (min-width: 980px) and (max-width: 1199px) {
div#rev_slider_1_1_wrapper, div#rev_slider_1_1 {
  min-height: 400px;
}
}

I have tested this and should work fine. You might be interested to change the height.

Cheers!

[core365]

Hi, it doesn’t seem to have had done anything to the text being cut off down the right hand side. I’ve tried changing the height etc too. It’s as though the text isn’t resizing itself at that size for some reason, as it’s fine on my ipad when it’s viewed portrait!

Cheers

[Rad]

Hi there,

Would you mind providing your admin login credentials in private reply? Your slider’s text layer has static width, it should be changed and it depends on how you set it up.

Thanks!

[core365]

This reply has been marked as private.

[Author]

Posts