Hi,

Please continue here: https://kriesi.at/support/topic/color-section-not-showing-color-or-image-background/#post-1492088

Best regards,
Ismael

Hi,

Thank you for the link.

Add this code in the functions.php file to load the Cairo font:

function av_load_google_fonts() {
    wp_enqueue_style(
        'google-fonts-cairo',
        'https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap',
        array(),
        null
    );
}
add_action('wp_enqueue_scripts', 'av_load_google_fonts');

After that, add the following css to make the font the default body text:

#top, body, p, span, li, a, h1, h2, h3, h4, h5, h6, input, textarea, button {
    font-family: 'Cairo', sans-serif;
}

Let us know the result.

Best regards,
Ismael

Hey ti2media,

Thank you for the inquiry.

The color of the email field is different due to this css code:

#top .kontaktformular input[type='text'] {
    background-color: #ffffff !important;
    border: none !important;
    color: #0d3c63 !important;
}

To correct it, please replace it with the following css:

#top .kontaktformular input[type='text'], #top .kontaktformular input[type='email'] {
    background-color: #ffffff !important;
    border: none !important;
    color: #0d3c63 !important;
}

Then add this css code to adjust the width of the form fields:

#top fieldset {
    margin-bottom: 20px;
    overflow: hidden;
}

Best regards,
Ismael

Hey ti2media,

Please try this CSS as well:

#scroll-top-link.avia-svg-icon svg:first-child {
  margin-top: 7px;
}

Best regards,
Rikard

Hey jimmiemoreland,

Thank you for the inquiry.

You can add this css code to make the header sticky on mobile. Make sure to adjust the top padding based on the header’s height.

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

  /* Add your Mobile Styles here */
  .responsive.html_mobile_menu_tablet #top #wrap_all #header {
    position: fixed;
  }

  .responsive.html_header_top #top #main {
    padding-top: 120px !important;
    margin: 0;
  }
}

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

Try to add this css code to show the full image:

#top .fullsize .template-blog .big-preview img {
    min-width: 300px;
    background-size: contain;
}

Best regards,
Ismael

Hey Eleina,

Thank you for the inquiry.

Please add this code in the Quick CSS field to adjust the layout of the top bar on mobile view:

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

  /* Add your Mobile Styles here */
  #top #header_meta .phone-info>div>div {
    display: flex !important;
    align-items: center !important;
    justify-content: start !important;
    flex-direction: column;
    gap: 4px !important;
  }
}

Result:

Best regards,
Ismael

Hi,

Thank you for the inquiry.

Adding this code in the Quick CSS field should correct the layout issue on mobile view:

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

  /* Add your Mobile Styles here */
  #commentform label {
    position: relative;
    left: auto;
    top: 0;
  }

  #top .comment-form-cookies-consent label {
    top: -30px;
  }
}

Screenshot:

Best regards,
Ismael

Hi,
For mobile add this css:

#top #wrap_all .header_color .menu-item-30.av-menu-button-colored > a .avia-menu-text {
    background-color: #6c0f1b;
    border-color: #6c0f1b;
}
#top #wrap_all .header_color .av-menu-button-colored > a:hover .avia-menu-text {
    color: #000;
}

Please note that mobile devices don’t have a hover rule, but the color changes on click, like the desktop hover, adjust to suit.

Best regards,
Mike

Hey ceakins1908,
Try this css in your Quick CSS:

#top #wrap_all .header_color #menu-item-30.av-menu-button-colored > a .avia-menu-text {
    background-color: #6c0f1b;
    border-color: #6c0f1b;
}
#top #header.header_color.av_header_transparency .av-main-nav > li.av-menu-button-colored > a:hover .avia-menu-text {
    color: #000;
}

Adjust the black hover color to suit, then clear your cache and check.

Best regards,
Mike