MaxUncu

You just need to add the code in Design -> Custom CSS. If you want to apply this to that specific page only then use: <style> @media only screen and (max-width: 480px) { .sqs-gallery-block-slideshow .meta { display: block !important; } } </style> In Page Header Code Injection box from your screenshot.

Hey @myhabitatdesign, this should do the trick: @media only screen and (max-width: 480px) { .sqs-gallery-block-slideshow .meta { display: block !important; } }

Hey @bjaakkola, there is used a code block to get this done. This code needs to be added in code block for each link: <a href="#" class="link-with-image">Hover over me</a> <div class="image-container"> <img src="path/to/image.jpg" alt="Image description"> </div> And this is the CSS code that needs to be added only once: .image-container { display: none; position: absolute; top: 100%; left: 0; } .link-with-image:hover + .image-container { display: block; } So basically the image will be hidden by default and will display only when you hover over the link. Hope this helps.

Hey @MattCQ, add this code in Custom CSS area: main { padding-top: 40px!important; } This needs to do the trick. -- Cheers, Max.

Hey @Arnaudfrenchy, the thing is that you're using a method that is outdated and it won't work for responsive or screens that are smaller than the image you're using. The coordinates for each region are calculated based on the initial image size so if you have an image that is for example 800x600 then all coordinates will be generated based on this size and when you resize the screen the values will remain the same even if the image resizes. A solution will be to use an SVG image which will work on any screen size. Cheers, Max.