Unfortunately due to other commitments, we are no longer able to provide support for these themes.

All our themes are now free and can be downloaded by anyone to use/modify however they wish.

We want to thank all our users for their support over the years. All the best in 2020 and beyond.

Slider heading and content dissapear when resizing browser

avanaavana Lifetime Member
edited November 2017 in Grind
Hi
On the 2nd slide "Spray foam for residential"
When I pinch my browser to resize it gets to a point where the heading and content are removed and the image remains. when I continue downsizing the heading and content appear and the image is removed.
Also, on both slides the image doesn't appear to be responsive.

www.thermalguardusa.com

I'm trying to paste the text I have in the slides page but its converting html to visual in here.
How can I paste it so you see the text?



Post edited by avana on

Comments

  • Options
    Mark_HodderMark_Hodder Administrator, Lifetime Member
    The background image has to work that way in order to be able to stretch and shrink without distorting the image, there really isn't any way around that.

    However, you can use #7 here to keep showing images from the content on smaller screens: https://help.themedy.com/Thesis/Grind/CSS_Samples
    Need Additional Help?
    - Check out the Resource Center for helpful tutorials and hints.


    image
  • Options
    avanaavana Lifetime Member
    edited November 2017
    It's the content that disappears the image remains. then when minimized further the content reappears and the image is removed.
    https://ibb.co/bGxvOR
    https://ibb.co/eDHjHm
    https://ibb.co/hyhUiR
    Post edited by avana on
  • Options
    avanaavana Lifetime Member
    This is the slider html
    https://ibb.co/nsB3cm
  • Options
    Mark_HodderMark_Hodder Administrator, Lifetime Member
    That code is to change it so the image remains always - so it still applies.

    However, the content is not actually disappearing in those examples. The image is taking up to much room so it's pushing the content down under the slider display area (which is why we default to hiding images on smaller devices in the first place)

    When you get down to even smaller screens there isn't going to be enough horizontal room to the put the images like you have them (to the left and the right) at all without making them very tiny.

    All you can really easily do is either decide that those images aren't that important on mobile and leave them hidden or move the images to inside the content and then add the CSS I gave you plus you would add some simple CSS to make the images smaller on smaller screens.

    You might be able to get more advanced by giving more vertical area and setting up code to drop the image to under the content on smaller screens but that would require some work and outside the scope of support here.

    You can use the link in my signature if it's important enough to hire someone to write this code for you though.
    Need Additional Help?
    - Check out the Resource Center for helpful tutorials and hints.


    image
  • Options
    Mark_HodderMark_Hodder Administrator, Lifetime Member
    If you just decide to hide the images, this will trigger it faster so that content doesn't get pushed down at that screen size:
    @media only screen and (max-width: 800px) { 
        body .flexslider .slides .flex-caption img {
            display: none;
        }
    }
    Need Additional Help?
    - Check out the Resource Center for helpful tutorials and hints.


    image
  • Options
    avanaavana Lifetime Member
    Hi Mark
    I am not looking to keep the images visible, just the content. My issue was the content not visible at certain screen sizes.
  • Options
    avanaavana Lifetime Member
    I believe I fixed the issue by moving the image html below the content.
  • Options
    Mark_HodderMark_Hodder Administrator, Lifetime Member
    If it didn't my last message had the code to accomplish that too ;)
    Need Additional Help?
    - Check out the Resource Center for helpful tutorials and hints.


    image
This discussion has been closed.