Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 11, 2020 at 3:59 pm #1183561
    illerrre

    Hi guys,

    I have created a header widget using the following code under functions.php:

    add_action( ‘ava_after_main_container’, ‘enfold_customization_header_widget_area’ );
    function enfold_customization_header_widget_area() {
    dynamic_sidebar( ‘header’ );
    }

    Using layerslider and putting the following shortcoders in the widget as a HTML:

    [layerslider id=”1″]
    [layerslider id=”2″]
    [layerslider id=”3″]

    I was able to get the following results:

    Desktop: https://ibb.co/j6JgyMW
    IPAD: https://ibb.co/16zJmmv
    Mobile: https://ibb.co/tDPP9zT

    Simply because I used three different images that I showed/hid on certain resolutions. Very easy to do with layerslider and the results are great.

    Now the problem is that using layerslider compared to just adding a single image in the header widget lowers my google page speed performance from 40 – 45 to 21 – 29. Both are bad values and I haven’t started with real optimizing yet, but clearly just going with a single image is the better choice. When doing so the results are, however, not good. You can view them right now on my page at http://www.onlineterapi.nu.

    Two issues:

    1. Even though I’ve entered 100% width and 100% height there is a lot of white space above and beneath the image.

    2. The image doesn’t perform well on ipad and mobile devices (gets too small). The one I am eventually going to use will be very hard to read. I am, in other words, looking for a solution similar to the one layerslider gave me; where I’m able to show/hide a certain image on a certain resolution.

    In addition to this it would be great if I could hide the header widget on certain pages.

    Is this something you could help me out with?

    February 12, 2020 at 6:48 am #1183771
    Rikard

    Hey illerrre,

    Please try this to remove the white space:

    #custom_html-12 {
  padding: 0 !important;
}

    So you are adding the images manually to the widget and you want to use different images for different resolutions? If so then you can add classes to your images and then target them with CSS for different resolutions. This for mobile for instance:

    @media only screen and (max-width: 767px) {
.mobile-only {
  display: block; 
}
}
@media only screen and (min-width: 768px) {
.mobile-only {
  display: none; 
}
}

    Best regards,
    Rikard

    February 12, 2020 at 11:53 am #1183829
    illerrre

    Rikard! My man! You’re such a king :) Everything worked like a charm.

    The only thing is that I still have a little bit of spacing between the content and the header widget. Do you know how we can get rid of this?

    Also, is there any way to hide the header widget on certain pages?

    February 14, 2020 at 5:48 am #1184385
    Rikard

    Hi,

    Please try this CSS as well:

    @media only screen and (min-width: 768px) {
#custom_html-12 {
  height: 178px;
}
}

    If you want to hide the widget on certain pages then inspect the page in question using your browser, then you will find the page id class in the body tag. You can then hide the widget using CSS like this:

    page-id-000 #custom_html-12 {
  display: none;
}

    Best regards,
    Rikard

    February 14, 2020 at 11:57 am #1184463
    illerrre

    Thanks, Rikard!

    Hiding the widget worked perfectly. Just a dot missing behind page (if anyone is reading this and want to do the same).

    Setting custom height was problematic though. If I used 248px it was perfect on 1920×1080 resolution, but not on anything between 1210px and 1900px. And there was no one value that would fit that span either so I would have to use many different custom heights to get it right. Isn’t there any other way to do it?

    February 15, 2020 at 8:40 am #1184700
    Rikard

    Hi,

    Thanks for the update. Please try this instead to adjust for the space under your widget:

    div.main_color {
  margin-top: -7px;
}

    Best regards,
    Rikard

    February 15, 2020 at 11:35 am #1184724
    illerrre

    Thanks, Rikard! This worked perfectly. Just had to adjust my mobile image a bit, but all good.

    Thanks for all the help – much appreciated!

    February 15, 2020 at 8:36 pm #1184821
    Victoria

    Hi illerrre,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Responsive image in header widget’ is closed to new replies.