-
Posts
-
I’ve implemented the Fullwidth Easy Slider on my homepage. It looks great on a desktop or a tablet, but it’s not displaying 100% on my smartphone in portrait (vertical) position. I get the header, but not the subhead text or the buttons. I can see them if I turn my phone to the horizontal position, but I need to see it in both positions.
I’d also like to know how to move the overlaid text and buttons slightly to the right. Can you please provide the code and explain what to change for different orientations up and down and left and right?
Hey Kim,
Try adding this css code in Quick CSS (located in Enfold > General Styling):
@media only screen and (max-width:479px) { .page-id-3708 #full_slider_1 .slideshow_caption { padding-top: 20px !important; } }Let us know if it helps.
Best regards,
NikkoThanks Nikko. That did work, but on the smartphone screen the words aren’t wrapping in a manner that you can read them. How can I control the spread of the words across the image? Can I decrease the width that the words are spreading across the image? What code would I add for that for the smartphone screen vs the desktop screen?
Hi,
Try to replace the code I gave to this one:
@media only screen and (max-width:479px) { .page-id-3708 #full_slider_1 .slideshow_caption { padding-top: 20px !important; } .page-id-3708 #full_slider_1 .slideshow_caption h2 { text-shadow: 0 0 10px #fff; margin-bottom: 0 !important; } .page-id-3708 #full_slider_1 .slideshow_caption .avia-caption-content p { text-shadow: 0 0 10px #fff; margin: 4px 0 0 !important; } .page-id-3708 #full_slider_1 .slideshow_caption a.avia-slideshow-button { padding: 12px 0 !important; margin: 0 2% !important; display: block; float: left; width: 46%; margin-top: 10px !important; } }Let us know if it’s good.
Best regards,
NikkoNow the buttons are all crazy big and aligned right, not left.
Is there a way to get the text to wrap like it does on a desktop or tablet?
Hi,
I have checked it using my mobile device and this is how it looks: https://imgur.com/a/DTYX1
Best regards,
NikkoI’ve flushed the cache on the server and on my phone. Plus im using another iPhone that had not previously gone to that website. No change from the picture I attached. That’s what we’re seeing in this end.
Hi,
Can you try to change the code I gave (this part):
.page-id-3708 #full_slider_1 .slideshow_caption a.avia-slideshow-button { padding: 12px 0 !important; margin: 0 2% !important; display: block; float: left; width: 46%; margin-top: 10px !important; }to:
.page-id-3708 #full_slider_1 .slideshow_caption a.avia-slideshow-button { padding: 12px 0 !important; margin: 0 2% !important; display: block; float: right; width: 46%; max-width: 144px; margin-top: 10px !important; }The buttons will rearrange learn more left and buy now right. Let us know if this works if not, please provide a screenshot again :(
Best regards,
NikkoNope. Still doesn’t work. I flushed the cache on the server, in my phone, added chromes browser to my phone and even added an !important to you code after the margin line and nothing is changing on the resizing of those buttons. But they are aligning right now.
Hi,
Try this code in the General Styling > Quick CSS field:@media only screen and (max-width: 479px){ .responsive #top.page-id-3708 #wrap_all .container.caption_container { width: 90%!important; max-width: 90%!important; } }Best regards,
MikeSorry Mike, that didn’t work either. Now I can’t see the buttons at all. I flushed the cache on the server and on my phone. What’s the problem here?
Hi,
I adding the above code to your General Styling > Quick CSS field, and tested on my Android & Screnfly iPhone 6/7, seems to be working good with the buttons side by side. Please see screenshots and link in Private Content area, and check on your device.Best regards,
MikeHey Mike,
Thanks for the help. This is so weird. I’ve been clearing the cache on my iPhone 6s every time I’ve put new code in and the buttons don’t line up properly. I’m looking at your images, but on my phone, the buttons are stacked on top of each other. I looked at the same page on my son’s iPhone 6s and on his phone, it looks like your images with the buttons sitting side by side. No idea why my phone seems to be serving old images, but it looks like the problem is solved on everyone else’s phone, which is good enough for me.Question, obviously this is a problem with the layout of this feature. How do you implement the code to work on any page of the site? I see in the code you have it set for “.page-id-3708” and I’m assuming that’s specific to this one page.
Thanks
- You must be logged in to reply to this topic.