Hi,

Sorry for the confusion. I thought that you wanted the button element to look the same as the slider button, but it’s the other way around. Please use this css code to adjust the style of the slider button.

#top .avia-slideshow-button {
    text-transform: none;
    background: #FAC710 !important;
    padding: 12px 16px 10px;
    font-size: 16px;
    min-width: 90px;
    border-radius: 3px;
    text-decoration: none;
    display: inline-block;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    margin: 3px 0;
    line-height: 1.2em;
    position: relative;
    font-weight: normal;
    text-align: center;
    max-width: 100%;
    color: #000;
    margin-top: 20px;
}

#top .avia-slideshow-button:hover {
    border-color: #CA9336;
    color: #fff;
    background: #D28C17 !important;
}

Best regards,
Ismael

Hey gatehealing,

Thank you for the inquiry.

1) Summary: Legible Font Sizes (THREE issues)

1) Font Size 11px – It seems to be referring to the base or default font size for all text elements. This css rule is overridden by the custom font sizes that can be set in the Enfold > General Styling > Typography panel.

2-3) Font Size 11px .pagination span, .pagination a – You can adjust the size of the pagination with this css code.

#top .pagination .current, #top .pagination a, #top .fullsize .template-blog .pagination a {
    height: 50px;
    width: 50px;
    line-height: 50px;
    border-radius: 100px;
    margin-right: 5px;
    font-size: 1em;
}

#top .pagination .pagination-meta {
    float: right;
    line-height: 35px;
    font-size: 1em;
}

2) Summary: Tap Target Sizing (FIVE issues)

1) Element Label Search – Looks like you’ve disabled the search bar in the header but if you want to adjust the size of the label, try to use this css code.

#top .av_minimal_header #s {
    font-size: 1.2em;
}

———————————————–
2-5) Element Label span.blog-categories > a – The other 4 refers to the post categories, which can be adjusted using this css code.

.html_elegant-blog #top .post-entry .minor-meta {
    font-size: 1em;
}

Best regards,
Ismael

Hi,
Try this css instead:

#top .mfp-content .avia-builder-el-69 .avia-button:first-child,
#top .mfp-content .avia-builder-el-80 .avia-button:first-child {
    background-color: #0e76a8;
    border-color: #0e76a8;
    color: #ffffff;
}

Best regards,
Mike

Hi,

I created the lower button at the green arrow with the button element and some CSS.
Now I want the button at the top of the red arrow to look the same.

Have you tried editing the button styles within the element’s Styling panel? You’ll find options there to customize attributes like color, font size, borders, and more.

Best regards,
Ismael

Hi,
Try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
#top .mfp-content .av-9g7ebi-f2e12a2e9a0504676810d016a51cefd3,
#top .mfp-content .av-4xc9se-e01829d9bd552af3332b6fd9af5b84e8 {
    background-color: #0e76a8;
    border-color: #0e76a8;
    color: #ffffff;
}
}

Thanks for pointing out the filter Guenni007

Best regards,
Mike

Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,
For future readers please see the final solution at this thread
With the hotspot tooltips set to always show add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function one_hotspot_only_script() { ?>
  <script>
(function($) {
 $(window).ready(function() {
           $('.avia-tooltip').hide();	
       $('.av-image-hotspot_inner').on( "click", function(e) {
       	var $this = $(this).parent().find('.avia-tooltip');
       	$(this).parent().css({'z-index':'9'});
	      $(this).siblings('.avia-tooltip').toggle('show');
	      $('.avia-tooltip').not($this).hide();
	      $('.avia-tooltip').not($this).parent().css({'z-index':'1'});
        });
     });
})(jQuery);
</script>
  <?php
}
add_action('wp_footer', 'one_hotspot_only_script', 99);

and on tooltips should show on page load and clicking a hotspot will show a tooltip then clicking any other hotspot will close any other open tooltip and open the one clicked.

Best regards,
Mike

Hi,

We adjusted the height of the images as follows, so they retain the aspect ratio of 16:9.

Desktop: 200px
Tablet: 147px
Mobile: 120px

Please make sure to remove the cache before checking the page.

Best regards,
Ismael

Hi,

Thank you for following up.

Also still sqeezed on the desktop. It would be great if it would be the same everywhere…

You can adjust the “height” property value as needed in the css rules that we provided above.

On my tablet there is still no image on Privé-(Foto)bespreking (4th item

The image of the Privé-(Foto)bespreking is visible on our end. Would you mind providing a screenshot of the issue? You can use platforms like Savvyify, Imgur or Dropbox to upload and share the screenshot. Here are the steps to follow:

1.) Visit the website of your chosen platform, such as Savvyify, Imgur or Dropbox.
2.) Locate the option to upload a file or an image.
3.) Select the screenshot file from your computer or device and upload it to the platform.
4.) After the upload is complete, you will be provided with a shareable link or an embed code.
5.) Copy the link or code and include it in your message or response to provide us with the screenshot.

Thank you for taking the time to share the screenshot. It will help us better understand the issue you’re facing and provide appropriate assistance.

Best regards,
Ismael

Hi,

Thank you for the screenshot.

You may have to adjust the height of the header on smaller screens. Please add this css code.

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

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header {
    height: 200px;
  }
}

Best regards,
Ismael