Hey DermaBBSaar,
Thanks for your question, but the site that you have linked to doesn’t seem to be built with Enfold and doesn’t use the LayerSlider.
For Enfold & the LayerSlider on mobile, typically Enfold doesn’t have a transparent header for mobile, so on mobile the LayerSlider will be below the header, while on desktop with a transparent header the LayerSlider shows to the top behind the header.
Also in the LayerSlider, typically the desktop slider is in a landscape format, but mobile devices use a portrait format, so a desktop slider will scale down to show the whole slider.
Typically people will create two sliders one of desktop and the other in a portrait layout to show on mobile, if they want more that a scaled down slider.
If you have some experience with the LayerSlider, it is possible to use one slider and have the desktop and mobile elements and layout set for all devices, but this can be tricky, here is a basic example of the LayerSlider device options used to show different elements and different sizes. You could also watch some YouTube tutorials. But it is a lot easier to use two sliders and display one or the other.
So if this describes your situation please give this a try.

Best regards,
Mike

Hey UPON,
Thank you for the link to your site, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top .formcraft-datepicker .ui-datepicker-title select {
    color: inherit;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
    box-shadow: none;
    padding: 0 0.5em!important;
    height: 2.9em;
    vertical-align: top;
    margin: 0;
    border: 0;
    background: 0 0;
    cursor: pointer;
    width: auto;
    display: inline-block;
    font-size: inherit;
    border-radius: 0;
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.
This in the expected results:

Best regards,
Mike

Hi,
When I checked your site the blue background color for the “COSMETIC, FAMILY & SPECIALTY DENTISTRY” section and the background image and font size for the “New Patient Offers” only show when I’m logged in. This is due to your caching plugin, WP Rocket, note that the cache settings shows the cache for mobile devices and logged out users:

So your WP Rocket cache needs to be cleared. I did this and checked your site again logged out and incognito and now your sections show correctly.
I checked with Windows in Chrome, Firefox, & Edge and it is showing correctly now, Please note that testing Safari can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
If you find that after making edits to your site you see this issue a again, I recommend disabling your caching plugin until you are done creating your site, often caching causes issues while people are creating the sites, your caching should be activated only after your site is done so you don’t need to fight with it.

Best regards,
Mike

Hi,

Thank you for the update.

We edited the code a bit. Please remove the previous code and replace it with the following.

#top #wrap_all #av-burger-menu-ul>li {
    opacity: 100;
    position: relative;
    top: 0;
    transition: none;
    transform: none;
    left: 0;
    right: auto;
    text-align: left;
    border-bottom: 0.1em solid #fff!important;
    text-align: left;
    font-weight: 800;
    font-size: 28px;
    text-transform: uppercase;
}

#top #wrap_all #av-burger-menu-ul>li:first-child {
    border: none !important;
}

Best regards,
Ismael

Hi,

Thank you for the screenshot.

The heading seems to be resizing correctly on our end, but if you still want to adjust it, you can try this css code.

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

  /* Add your Mobile Styles here */
  #top #wrap_all .av-special-heading.av-1kii6-20aefa4b8a1e86b824c2b08956737de9 .av-special-heading-tag, #top #wrap_all .av-special-heading.av-3yvx2-b3a74335a955a8c783977b3748088567 .av-special-heading-tag, #top #wrap_all .av-special-heading.av-12jlsm-3c4c1638e4edbfc505398e6c922fa44b .av-special-heading-tag, #top #wrap_all .av-special-heading.av-118a8u-b260f37eef566a9c2d56de7e85194bae .av-special-heading-tag {
    font-size: 1.2em;
  }
}

Best regards,
Ismael

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

Hey Martin,

Please try the following in Quick CSS under Enfold->General Styling:

td {
    font-size: 16px;
}

Best regards,
Rikard

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

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

Hey Nandavbk,

This CSS is applying on your site:

.entry-content-wrapper div li {
    font-size: 15px !important;
}

You might have added that in Quick CSS in the theme options?

Best regards,
Rikard

Hi,

Thanks for the update. You can try using this CSS:

.main_menu li a {
  font-size: 16px;
}

.main_menu li a:hover {
  color: green;
}

.main_menu li a:active{
  color: yellow;
}

Best regards,
Rikard

Hi,
On mobile there is not enough room for the buttons next to the logo, so they will need to be smaller and under the logo.
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 430px) { 
	.responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-basis: 100%;
	}
	.responsive #top #header #header_main .inner-container .widget .avia-button.avia-size-medium {
	padding: 12px 5px 10px;
    font-size: 12px;
    min-width: 60px;
	}
	.responsive #top #header #header_main .inner-container .widget>div {
		padding: 0;
	}
	.responsive #top #header #header_main .inner-container .widget>div>div {
	text-align: center;
	}
}

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thank you for the link to your site, I see that your tab images are large and the title font is also large for all of the tabs to fit on a small mobile screen, the tabs are designed to float off of th screens so the images and text can be large.
But if you want them to all fit on the screen try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) { 
.av-tab-section-tab-title-container .av-tab-section-image {
	width: 80px;
}
#top .av-section-tab-title {
    padding: 10px 5px 0px 5px;
}
.av-tab-section-tab-title-container .av-inner-tab-title {
    font-size: 12px;
    word-break: break-all;
}
}

I tested this on a 425px screen size, please see the screenshot in the Private Content area, if you have a smaller screen feel free to adjust the values smaller to suit your needs.

Best regards,
Mike

Hey ausgesonnen,
Please make the font size adjustment in the theme setting at Enfold Theme Options ▸ Advanced Styling and if you don’t see the Main Menu Links already with a font size, then use the drop down to choose it and add the size you wish.
There is also a Main Menu sublevel Links option if you also want to change those sizes too.

Best regards,
Mike

Hey maryenvato,

Please try the following in Quick CSS under Enfold->General Styling:

.av-masonry-entry .av-masonry-entry-title {
    text-transform: none !important;
    font-size: 18px !important;
}

Best regards,
Rikard