Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • July 5, 2022 at 3:33 pm #1357292
    woogie07

    Hi,

    Each of the top banners on my site include a half col image + Headline text on a Blue Background.

    1/ The image does not view well on a mobile. It retains the depth but crops the image. What setting would I change for the image to resize in the same aspect ratio on a mobile?

    2/ As an alternative on desk, I want to see what this section looks like as a full width image with Blue Block + text/header either above or below the image that buts up to the image. What would be the best way to achieve this and settings?

    Thanks
    Marcus

    July 6, 2022 at 2:54 am #1357340
    Ismael

    Hey woogie07,

    Thank you for the inquiry.

    1-2.) Try to apply a custom css class name to the grid row element, e.g “banner-grid”, then use this css code to adjust the height of the first cell on mobile view.

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .banner-grid .flex_cell:first-child {
    height: 200px !important;
  }
}

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css. The following documentation should help.

    // https://kriesi.at/documentation/enfold/add-custom-css/

    Best regards,
    Ismael

    July 6, 2022 at 5:08 pm #1357418
    woogie07

    Hi

    I will try this.

    1/ Does the CSS need adding to the Grid Column element where the background image is? or the Grid Row that has the 2 x Grid Coumns within?

    2/ Ref your note on below. Once I have checked this is all OK do I able the File Compression again?

    Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css. The following documentation should help.

    Thanks
    Marcus

    July 6, 2022 at 11:07 pm #1357464
    woogie07

    Is it best practice to create a child theme and add CSS in the child theme, or use quick CSS in the parent theme? I am not sure if all css is lost when the theme is updated?

    Thanks
    marcus

    July 6, 2022 at 11:23 pm #1357467
    woogie07

    Hi

    I have tried applying this to the page in private content by:

    1/ Adding ‘banner-grid’ in the grid row developer settings under css class name
    2/ Adding the code you supplied in Enfold > Theme Options > General Styling > Quick CSS
    @media only screen and (max-width: 767px) {

    /* Add your Mobile Styles here */
    .banner-grid .flex_cell:first-child {
    height: 200px !important;
    }
    }

    It has not made any difference to the way the image resizes on mobile view.

    Please advise

    Thanks

    July 9, 2022 at 8:16 pm #1357806
    Mike

    Hi,
    Thank you for the link to your site, as I understand your question for mobile you would like the image to show fully, please try this code in the General Styling ▸ Quick CSS field or in the WordPress ▸ Customize ▸ Additional CSS field:

    @media only screen and (max-width: 524px) {
  .responsive.avia_mobile #top #wrap_all .banner-grid.avia-full-stretch {
    background-size: contain !important;
    height: 285px !important;
    padding-top: 0;
    padding-bottom: 0;
  }
}

    After applying the css, please clear your browser cache and check.
    Please see the screenshot in the Private Content area.

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.