Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 8, 2020 at 9:24 am #1171359
    geraldinetay27

    Hi, How to reduce the header height of the green part in mobile view?

    About

    https://www.dropbox.com/s/efla7f48cey3rhr/Pixel%202%20Screenshot.jpg?dl=0

    Also, the images looked squashed in Pixel 2. Is there anyway to fix this issue in css?

    January 8, 2020 at 1:25 pm #1171419
    Rikard

    Hey geraldinetay27,

    You have set minimum height and some padding to that element, maybe it would be best if you copied it and removed the minimum height and padding? Then you can select on which screen resolution the respective element should be displayed using Screen Options in the element options.

    Best regards,
    Rikard

    January 8, 2020 at 1:26 pm #1171421
    geraldinetay27

    Hi Rikard,

    That would mean that I would have to duplicate the content though. Is it possible to fix this in css?

    January 8, 2020 at 2:23 pm #1171448
    Yigit

    Hi,

    Please add following code to Quick CSS in Enfold theme options > General Styling tab

    @media only screen and (max-width: 480px) {
#banner .flex_cell:first-child {
    min-height: 200px!important;
}}

    Best regards,
    Yigit

    January 10, 2020 at 9:24 am #1172088
    geraldinetay27

    Hi Yigit, Thank you! The fix works. You can close this ticket now :)

    January 10, 2020 at 12:30 pm #1172125
    Rikard

    Hi,

    Great, I’m glad that Yigit could help you out. I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Reduce Header height in Mobile’ is closed to new replies.