Viewing 27 posts - 1 through 27 (of 27 total)
  • Author
    Posts
  • #711157

    Hi I’m using the ‘Enfold Health Coach’ demo and set background images in the 50% cells. When decreasing the screen sizes, the displayed image details get lost, because the image isn’t responsive.
    Is there a way to get them shrinking with the screen sizes? It doesn’t look good e.g. on iPhone or iPad having the images cut off.
    Thanks for helping.
    Best regards,
    D.

    #711417

    Hi diggital!

    Can you post a link to the page having that issue? Is the image you used as a background (just like Enfold Health Coach) or not? you can post the link in the “private content” so only moderators can see.

    Best regards,
    Nikko

    #711635

    Hi Nikko,
    yes I used background images and now turned them off for mobiles in the settings for the cell. But for medium screen resolutions like tablets it’s still cutting off the images. I’ll post credentials for you to have a look at it.

    I also noticed that the word breaks are missing in the mobile sizes so that every text block in the narrow size gets big gaps. The text blocks with the deactivated images now have a way too big padding as well. Do I have to adjust everything manually with media queries? Any suggestions?

    Best regards,
    D.

    #711736

    Hey!

    The only solution I can give to ipad is to make it 1 column, try adding this in Quick CSS (located in Enfold > General Styling):

    @media only screen and (max-width:767px) {
      #top #hello .av_one_half {
        display: flex;
        width: 100%;
      }
    }

    Word-breaks can be added via media queries for mobile devices, you can add this code in Quick CSS:

    @media only screen and (max-width:767px) {
      * {
        word-break: break-all;
      }
    }

    As for gaps and paddings, can you post a screenshot if those issues still persists (pls specify if mobile or ipad) even after adding the code above.

    Cheers!
    Nikko

    #712118

    Hi Nikko,
    thanks for this solution. Unfortunately it’s not working how expected.
    The word breaks work, but the content isn’t really readable when using it, so I guess this should be like it is, if there is no other solution?

    Big gaps:
    Seems to be the cell padding, it was 100px before in full size, e.g. 320px width, so there are gaps in the top and bottom of each cell.
    The footer (3 cols in full size) also has big gaps on top and bottom after becoming 1 column.

    1 column:
    After deactivating the background images for mobiles, it’s already 1 col below 768px, so the CSS for this is useless.

    Cut off images:
    I tried iPad mini in portrait mode (1024 x 768px = 2 cols), the images seem to have the same height as in full size mode, so they are not responsive at all and the cell padding is way too much. The most important item would be having the background images and cell padding responsive for less then 768px and between 768px and 1024px.

    Do you have any idea how to solve this? It would be great.

    Thank you for helping.

    Best regards,
    D.

    #712122

    Screenshot

    #712328

    Hey!

    Try to replace this code I gave you:

    @media only screen and (max-width:767px) {
      #top #hello .av_one_half {
        display: flex;
        width: 100%;
      }
    }

    And replace it with:

    @media only screen and (max-width:1024px) and (min-width:768px) {
      #top #hello .av_one_half {
        display: flex;
        width: 100%;
        padding: 50px 100px 20px !important;
      }
    
      #top #hello .av_one_half.avia-builder-el-last {
        padding-bottom: 50px !important;
      }
    }

    As for word breaks please replace this:

    @media only screen and (max-width:767px) {
      * {
        word-break: break-all;
      }
    }

    To:

    @media only screen and (max-width:767px) {
      * {
        word-break: break-word;
      }
    }

    This should break per word, however what I saw in your site was a long text that was overlapping, the workaround we can do with it is adjust font size.

    Regards,
    Nikko

    #712869

    Hi Nikko,
    thank you for providing new code.
    I enabled the background images for mobile now to check it. The boxes still are very long and narrow, word break is better now. But the anabled images appear in full width extremely low.

    Do you have an idea how we can fix it?

    Best regards,
    Dirk

    #712887

    Hi!

    Looking at the screenshot I realized you need it on other sections as well not those sections that has id set to hello, to do this I think you need to enable Custom CSS Classes, here is how to enable and use it: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Next, put custom-gridrow in Custom CSS Classes textfield (add this to all gridrows that has the same layout including the one that has id set to hello). In Quick CSS, just all #hello to .custom-gridrow, replace this code that I gave:

    @media only screen and (max-width:1024px) and (min-width:768px) {
      #top #hello .av_one_half {
        display: flex;
        width: 100%;
        padding: 50px 100px 20px !important;
      }
    
      #top #hello .av_one_half.avia-builder-el-last {
        padding-bottom: 50px !important;
      }
    }

    And replace it to:

    @media only screen and (max-width:1024px) and (min-width:768px) {
      #top .custom-gridrow .av_one_half {
        display: flex;
        width: 100%;
        padding: 50px 100px 20px !important;
      }
    
      #top .custom-gridrow .av_one_half.avia-builder-el-last {
        padding-bottom: 50px !important;
      }
    
      #top .custom-gridrow .av_one_half.avia-full-stretch {
        min-height: 500px;
      }
    }

    I have added the 3rd block for those fullwidth images, so it doesn’t look too low, just change the value as you see fit. Hope this helps :)

    Cheers!
    Nikko

    #712938

    Hi Nikko,
    yes, that’s it – looks much better and works great!!!
    Problem solved, I think this is a good solution :)

    Thanks a lot for helping!
    Cheers,
    Dirk

    #712977

    Hi Dirk,

    Glad we could help :) Have a great day ahead :)

    Cheers!
    Nikko

    #724202

    Hi,
    everything works fine now, but I found out that only 2 images are not showing up in the mobile version. I didn’t notice that before and don’t have an explanation for that. In the cell edit I enabled “always display” for the images. Very important was that the alignment of every cell was equal and set to top. I changed that on the whole page, but the 2 images are still missing.

    I will post new screenshots and it would be great if you have a solution? It’s very important, because the website is online!

    Thanks again for helping.
    Best regards,
    Dirk

    #725960

    Hi!

    The image cells are on top of each other on mobile as expected based on their positions on desktop view. You have to duplicate the grid row element then re-order the cell position as you would like them to display on mobile view. After that, you have to toggle the display property with css media queries. Basically, you’ll have two grid row elements with the same content, one for the desktop and the other for mobile.

    // http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Best regards,
    Ismael

    #727408

    Hi Ismael,

    thanks for your answer. That’s exactly what I did, Nikko posted some CSS that I use to get the content on mobile in 1 column. I checked every cell and really don’t know what went wrong, because only the 2 images get lost. Everything else is fine.

    I really need help on that, any ideas??

    Best regards,
    Dirk

    #728294

    Hi,

    some custom code you’re using must cause this issue. Please remove any custom code you’re using to find out which one is causing it and let us know about your results here.

    Login does not work anymore. Can you check please?

    Best regards,
    Andy

    #728440

    Hi,

    I used the custom code in the theme’s child and will post credentials for you to check it.

    It would be really great to get help on this, because I can’t find what went wrong with the 2 images :(

    Thanks for helping!

    Best regards,
    Dirk

    #728496

    Hi,

    again: remove any custom code you’re using to check if/which one is causing this issue and let us know about your results here. Deactivate any plugins while testing to check if one is causing a conflict.

    If that does not help then there might be some corrupted files, so please delete all theme files completely via FTP, before installing a fresh copy from your themeforest account. Here is a short tutorial on how to install the theme via FTP, in case you are not sure how that works:

    Best regards,
    Andy

    #728883

    Hi,

    I removed this code:

    @media only screen and (max-width:1024px) and (min-width:768px) {
      #top .custom-gridrow .av_one_half {
        display: flex;
        width: 100%;
        padding: 50px 100px 20px !important;
      }

    and afterwards all images appear (in 2 columns). But I need to have only 1 column.

    So still the same question why only the 2 images are missing in the mobile version and the rest works fine?

    Best regards,
    Dirk

    #728899

    Hi,

    I don’t understand what you mean. You say they appear when removing this code, but at the same time they’re still missing on mobile? can you explain further and provide us some screenshots of the issue when you remove your custom codes?

    Best regards,
    Andy

    #728998

    Hi,

    as I wrote: When I remove the code, every image appears correctly in the mobile version, but in 2 very narrow columns, as you can see in the screenshot from Nov 14 above.

    That’s why I want to use the code for having only 1 column, but something that causes the issue maybe is missing or something else has to be changed. I checked everything and it is as Ismael wrote on Dec 19: Grid row with 2 cell positions changes one after another from left to right and appear on top of each orher in 1 column in the mobile version.

    But still there is no reason why the 2 images get lost and everything else is fine. That’s the only question unanswered.

    Best regards,
    Dirk

    #729370

    Hi,

    I checked your page in question and you did not follow Ismael instructions. You’re using only one grid row for desktop, but you need to duplicate it for mobile. Please check again and follow the instructions: http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/

    Best regards,
    Andy

    #729795

    Hi,

    actually it’s working with Nikko’s CSS code, so I don’t have to duplicate the grid for mobile, because I already get the 1 column and every cell one below the other.

    This can’t be so complicated, but nobody answered my one and only question so far!?

    Best regards,
    Dirk

    #730279

    Hi,

    if it’s working then you already got the answer, don’t you?

    Of course there are always different solutions to a problem.

    Let us know in a new ticket if you’ve some more questions about our themes.

    Best regards,
    Andy

    #730840

    Hi,

    if you read my posts carefully my question still isn’t answered!
    Actually Nikko was providing the code and he solved my issue, unfortunately there are 2 images missing in mobile. Again and again, this is my one and only question since December 14.

    Isn’t it possible that he is checking my site to find the error?

    Best regards,
    Dirk

    #731424

    Hi Dirk,

    It should be showing up properly now. The reason the 2 images were not showing is because the cell where those 2 missing images doesn’t have any padding while the other 7 images have 100px padding on all sides. I have edited the 2 cells on that page.

    Regards,
    Nikko

    #731450

    Hi Nikko,

    thank you so much!!! I knew it couldn’t be so difficult, but I got stuck and overlooked this detail while checking and checking :)

    Man, you made my day!!! Great support and great code!!!

    Best regards,
    Dirk

    #731454

    Hi,

    Glad we could help!

    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    We really appreciate it if you review our theme on themeforest https://themeforest.net/downloads

    Thank you for using Enfold :)

    Best regards,
    Vinay

Viewing 27 posts - 1 through 27 (of 27 total)
  • The topic ‘Responsive background images’ is closed to new replies.