Tagged: ,

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • February 25, 2024 at 2:36 pm #1435356
    dowlassmoss

    Hi,

    I have a full width Easy Slider on my home page with two buttons. On a large screen this is fine, but on a mobile the buttons rather obscure the slides!
    How can I remove the buttons on screen sizes below 480px? I can’t see any way to do it in the Avia admin..?

    Also, I have ‘caption text’ on the slides, set to 24px for large screens, and 14px for small (mobile). The caption text doesn’t appear at all when viewed on mobile..? (unless it’s obscured by the buttons?)

    Thanks
    Hugh

    February 25, 2024 at 5:28 pm #1435364
    Mike

    Hey dowlassmoss,
    Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 480px) { 
	#top.home .avia-slideshow-button {
		display: none;
	}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.
    this will hide the buttons below 480px and then the caption will show.

    Best regards,
    Mike

    February 25, 2024 at 8:50 pm #1435374
    dowlassmoss

    Thanks! That was a painless fix!

    With the buttons gone I still can’t get the positioning of the ‘caption’ quite where I’d like it. Although the selected caption position is ‘bottom without frame’, the caption sits too high up in the image window in the mobile view (the desktop view is fine).

    Should I be using a more full-featured slider to get finer control of positioning?

    cheers
    Hugh

    February 25, 2024 at 9:48 pm #1435376
    Mike

    Hi,
    Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    @media only screen and (max-width: 480px) { 
.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption, .caption_bottom .slideshow_caption .slideshow_inner_caption {
    padding: 0;
}
}

    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

    February 26, 2024 at 12:07 pm #1435428
    dowlassmoss

    Mike, that was ideal, thank you! I confess that I’m not a CSS pro. It’s amazing what can be done with it if you know your way around ;)

    CSS fixes might also be sought for the red boxes (a grid row) which follow the slider. Again, on a desktop device they’re fine. But on a mobile the boxes are way too large, partly (I think?) because the icon pushes all the text into a tall column, and generally for mobole there’s too much padding of the boxes.

    I’m sure some CSS could fix it, and you’re welcome to advise me! But I also thought of another method which might work..? This would be to duplicate the grid row but rebuild the content in the cells – e.g. use simple text boxes rather than icon text boxes, and reduce the padding allround. The standard gridrow would be set to NOT SHOW on mobile devices (less than 480px); the duplicate re-built grid row would be set to NOT SHOW on larger screens (over 480px).

    Do you think that method would work?

    regards
    Hugh

    February 26, 2024 at 5:26 pm #1435472
    Mike

    Hi,
    When I check the red boxes on mobile they are the correct size based on the text font size, Please see the first screenshot in the Private Content area.
    If this is what you see than we can help adjust with css or you can follow your plan above that works for many people.
    But I want to ensure that you are not testing the mobile view on a desktop screen by making the screen smaller, if you test this way please ensure to reload the page, Please see the second screenshot in the Private Content area.
    If this is what you see then it is a testing error that real devices will not see, please let us know.

    Best regards,
    Mike

    February 27, 2024 at 12:54 pm #1435586
    dowlassmoss

    Hi Mike,
    No, I’m testing using my mobile not shrinking the desktop browser!
    I’m sure it’s displaying ‘correctly’…it’s just not displaying sensibly. The red boxes completely overwhelm the header and slider, occupying 75% of screen estate in your image, which is silly for a couple of small messages.
    I will try the duplicate grid row method, – glad to hear you confirm it should work. CSS is all very well, but I’m going to end up with loads of additional code which I don’t fully comprehend…and somewhere down the road may not even remember where in the admin I put it and what it’s fixing! The duplicate grid row approach is administratively a bit easier for me, and I can redesign the message boxes a little.
    Will let you know how it goes.

    regards
    Hugh

    February 27, 2024 at 6:11 pm #1435626
    Mike

    Hi,
    Thanks for the feedback, and glad to hear that the size of the red boxes was not due to a testing error, we will leave this open while you test your new element, if it solves or if you want more help just let us know. If you do want more help perhaps a mockup image of what you would like to see on mobile would help.

    Best regards,
    Mike

    March 13, 2024 at 2:45 pm #1437138
    dowlassmoss

    Hi Mike,

    Sorry for late reply. But I’ve got it working using the grid row method…one grid row visible for desktop, another grid row for mobile. That allowed me to present a few different things in a different way, seems to work quite well.

    Thanks for you help and suggestions on this one.

    regards
    Hugh

    March 13, 2024 at 5:31 pm #1437153
    Mike

    Hi,
    Glad to hear that you have this sorted out, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

    Best regards,
    Mike

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Full Width Easy Slider – remove buttons for mobile’ is closed to new replies.