-
Posts
-
Hi there,
I have used a slider to display temporary text on a homepage: https://www.pointgreyfiesta.org/home-2020-cancelled/
I’m using the slider because I was using it up till now on the pointgreyfiesta.org homepage which is still live and because I like its functionality and the fact that the text slides in. The page above will be a temporary homepage until July.The temporary text looks fine on a computer and in vertical orientation on an iPad & phone. As soon as I rotate the phone or iPad to horizontal orientation it hides the text on a phone and cuts it off on an iPad.
I have 3 different sliders: 1 for each device – computer, iPad and phone and use the ‘Screen Options’ to show the appropriate one for each device.
I have put the following CSS into the iPad slider settings so that it does not cut any text off in vertical view but can’t figure out what CSS would address the height cut off for horizontal view:
@media only screen and (min-width:768px) and (max-width:959px) { #top.home { display: block !important; } }Thanks for your help!!
Hi messmeriza,
We apologize for the delayed response.
Can you try adding this CSS code:.page-id-4311 #full_slider_1 .avia-slideshow-inner, .page-id-4311 #full_slider_1 .avia-slideshow-inner > li, .page-id-4311 #full_slider_1 .avia-slideshow-inner .avia-slide-wrap img { height: 80vh !important; } #full_slider_1 .avia-slideshow-inner .avia-slide-wrap .slideshow_caption { bottom: 80px; }inside your media query:
@media only screen and (min-width:768px) and (max-width:959px) {Hope it helps.
Best regards,
NikkoHi again,
I have now replaced the old homepage with this new page that you have helped me work on and have defined the new homepage on Enfold > Theme Options > Frontpage Settings.
This was the old homepage: https://www.pointgreyfiesta.org/home/
While I was working on the new homepage the slider height was exactly the same as the old homepage and that’s what I want. Now that it’s live it has stretched the background image: https://www.pointgreyfiesta.orgIf I take out the code you gave me the slider has the correct height on a computer but then the iPad issue is obviously not solved. So the code that you gave me needs to be changed so that it only addresses the iPad and not the computer as well.
The code that you gave me for inside the media query I have only put into the CSS of the Fullwidth Easy Slider that addresses the iPad, not the other 2 sliders that address the computer and the phone.
https://www.dropbox.com/s/2jz0mm2fgjj7dry/Screenshot%202020-03-23%2013.22.08.png?dl=0
https://www.dropbox.com/s/4q4is53y9k1os69/Screenshot%202020-03-23%2013.24.41.png?dl=0Can you please help me again. I have put the login credentials into the private content box if you need to login.
Thanks!
CarolinHi Carolin,
We apologize for the delayed response.
Thanks for the login credentials.
I have modified the code in Quick CSS (organized the code and media queries and added new css codes).
The slider is not stretched now same as your old homepage, also I would like to ask what’s the difference between the 3 full-width sliders? I think you only need to use 1 or maximum of 2 but it actually depends on the slider image that you are using.
Can you try to check again if it looks much better now on desktop, iPad and mobile?Best regards,
NikkoHi Nikko,
Right now the text including the heading is cut off at the top when I look at it on my 15 in laptop :(
It also doesn’t show me any text on a phone in landscape orientation.I have the same content and background image on the 3 sliders but when I was trying to figure out the settings so it doesn’t cut anything off on a monitor/laptop, iPad and phone I thought 3 sliders, one for each device, is best?
I would like the text to be left aligned for all devices. with the black overlay over the whole background image.Can you please resize your browser window and see what happens at each stage. If you think it’s only necessary to have 1 slider that works for all 3 devices (large 22 or 24″ to smaller 13 or 15″ monitors/laptops, iPad and phone) then please delete the sliders that you think are not needed.
Thank you for your help!
CarolinHi Carolin,
We apologize for the delayed response.
Can you try to check it again?
I have removed the 2 other sliders and made changes to Quick CSS.
Let us know if you need further assistance.Best regards,
Nikko
- The topic ‘Fullwidth Easy Slider text cut off in horizontal orientation on iPad and phone’ is closed to new replies.