Hey Munford,

Thank you for the inquiry.

The left and right columns are already set to be 50%, but the row doesn’t expand to full width when there’s little text in the right column. To fix this, please try adding the following css code.

#top .isotope-item.special_av_fullwidth .inner-entry {
    text-align: left;
    display: table;
    table-layout: fixed;
    width: 100%;
}

Best regards,
Ismael

Hi,

Great, I’m glad that we could help :-)

Please let us know if you should need any further help on the topic, or if we can close it.

Merry Christmas,
Rikard

Hi,

You are welcome. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Thanks for that. This media query doesn’t seem to be closed:

@media only screen and (min-width:989px) {
.phone-info { font-size: 14px; padding-top: 20px; padding-bottom: 20px; padding-right: 100px;}

Best regards,
Rikard

Hi,

Great, I’m glad that we 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

Hey antdesign01,

Thank you for the inquiry.

The styles are enclosed within a css media query for desktop view, which is why the styles are not applied on mobile view.

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

}

If this wasn’t intentional, ensure that the css rules and other media queries are correctly closed.

Best regards,
Ismael

Hi,

The modification above should adjust the color of the burger menu items to white. If you need to change the color on hover, please add this css code.

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a:hover {
    color: gold;
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings in order to ensure that the changes take effect. By disabling the file compression settings, you will be able to make the necessary adjustments and updates without any conflicts. Once you have made the required modifications, you can re-enable the file compression settings to optimize the performance of your website.

Best regards,
Ismael

Hi,

Thank you for the screenshot.

You can adjust the hover style of the burger menu items in the Enfold > Advanced Styling panel. Look for the Menu Links in overlay/slideout element in the dropdown and adjust the Font Hover Color field accordingly.

You can also use this css code.

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul li a:hover {
    color: #ffffff;
}

Best regards,
Ismael

Hi,

Thank you for the update.

If you could help me remove those green borders from the current menu items in the dropdown, that would be great.

To remove the bottom border, please look for the following css rule:

#top #header #avia-menu li.current-menu-item > a > .avia-menu-text {
    border-bottom: #7ac142 solid 10px;
    padding-bottom: 9px;
}

Replace it with:

#top #header #avia-menu > li.current-menu-item > a > .avia-menu-text {
    border-bottom: #7ac142 solid 10px;
    padding-bottom: 9px;
}

Best regards,
Ismael

Hi,

Thanks for that. Please try the following in Quick CSS under Enfold->General Styling:

#top .fullsize .template-blog .post .entry-content-wrapper {
    text-align: left;
    font-size: 16px;
}

Best regards,
Rikard

Hey Anton,

Thank you for the inquiry.

Adding this css code should remove the space below the video.

.su-youtube.su-u-responsive-media-yes {
    margin-bottom: 0;
}

The double button on the official site is not available by default, but here is the markup in case you want to use it on your own site.

HTML:

<div class="avia-double-buttons "><a href="https://site.at/themes/enfold-overview/" class="avia-double-button avia-double-button-1">View Demos</a><span class="button_or">or</span><a href="https://1.site.market/" class="avia-double-button avia-double-button-2">Purchase Now</a></div>

CSS:

#top .avia-double-button {
    letter-spacing: 1px;
    padding: 13px 20px;
    text-transform: uppercase;
    font-size: 13px;
    text-align: center;
    min-width: 175px;
    display: inline-block;
    transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    border: 4px solid #fff;
    text-decoration: none;
}

#top div .main_color .avia-double-button {
    border-color: #e1e1e1;
    background: #fcfcfc;
    color: #222222;
}

#top #wrap_all .avia-slide-wrap .avia-double-button, #top #wrap_all .avia-hover-fx .avia-double-button {
    background: #000;
    background: rgba(0,0,0,0.2);
    border-color: #fff;
    color: #fff;
    padding-bottom: 11px;
    text-decoration: none;
}

#top .avia-double-button-2 {
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left: none;
}

#top .avia-double-button-1 {
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-right-width: 2px;
}

.avia-double-buttons {
    margin-top: 30px;
    text-align: center;
    position: relative;
}

#top .button_or {
    position: absolute;
    display: block;
    height: 26px;
    line-height: 21px;
    width: 26px;
    text-align: center;
    top: 50%;
    left: 50%;
    margin: -13px 0 0 -14px;
    background: #fff;
    color: #666;
    border-radius: 100px;
    font-size: 10px;
    border: 2px solid #FFF;
    font-style: italic;
    font-weight: 600;
    z-index: 11;
}

Best regards,
Ismael

Hey cambium.digital,

Thank you for the inquiry.

Layer Slider should automatically calculate the size of the text or layers based on the viewport or screen size. For example, if you set the font size of a text layer to 23px on desktop, LS should automatically resize this text to around 8-11px on mobile view. If you really need to manually control the style of a specific layer on different screen sizes, you can apply a custom ID or class name to it in the Layer Settings > Attributes panel. You can then add your own css modifications in the Quick CSS field or in the child theme’s style.css file.

Best regards,
Ismael

Hey whdsolutions,

Thank you for the inquiry.

You can add this css query to exclude specific elements when printing pages as documents. This helps customize the print layout and ensures a cleaner representation on paper.

@media print { 
  /* All your print styles go here */
  #top #main .sidebar {
    display: none;
  }
 }

The css rule above should hide the sidebar, but you can define more elements to exclude or modify as needed.

Best regards,
Ismael

Hi,

Thank you for the update.

To adjust the style of the burger menu items, please start with this css code.

.html_av-overlay-full #top #wrap_all #av-burger-menu-ul li a {
    color: #fff;
    height: auto;
    line-height: 1em;
    font-size: 0.8em;
}

.av-burger-overlay-bg {
    z-index: 3;
    opacity: 0.9;
    background: #000;
    display: block;
    position: fixed;
}

Best regards,
Ismael

Hi,

Thanks for the update, 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,

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,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard