Hi,

Thank you for the inquiry.

Have you tried adjusting the style of the heading tags in the Enfold > Advanced Styling panel? You can also replace the Text Block with a Special Heading element and adjust the size of the font for different devices or screen sizes in the Styling > Font Sizes panel.

Best regards,
Ismael

Hi,

Thanks for the update. Please try this CSS instead:

@media only screen and (min-width: 768px) and (max-width: 1024px) {
h2.avia-caption-title {
  font-size: 30px !important;
}
}

@media only screen and (max-width: 767px) {
h2.avia-caption-title {
  font-size: 20px !important;
}
}

Best regards,
Rikard

Hey AWZ,

Thank you for the inquiry.

You can now adjust the font size of the caption title and content for different screen sizes using the responsive font size settings. Please edit one of the slides, then go to the Styling > Font Sizes panel. You will see icon toggles or switcher for different devices (mobile, tablets etc) where you can manually specify a font size value for a specific screen size.

For the slider images, you can keep using css code that you added to adjust the size of the slide background for different screen sizes. Or as you already know, use the visibility options and create dedicated sliders for different screens or devices.

You can also check and try the layer slider plugin which is included in the theme by default. The plugin offers a lot more in terms of option and customization. There are also pre-made templates from the plugin library which should be responsive by default.

Best regards,
Ismael

Hi,

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

@media only screen and (min-width: 768px) and (max-width: 1024px) {
h2.avia-caption-title {
  font-size: 30px;
}
}

@media only screen and (max-width: 767px) {
h2.avia-caption-title {
  font-size: 20px;
}
}

Best regards,
Rikard

Hi,

Thanks for the update. You can set the font size for each screen size if you click into a slider element, then navigate to the Styling->Font Sizes tab.

You can post a feature request here if you like.

Best regards,
Rikard

Hi,
To replace the breadcrumb “Home” with a house icon and make it white, please try this css:

.breadcrumb-trail a.trail-begin:after {
	content: "\e821";
	font-family: entypo-fontello;
	font-size: 16px;
	color: #fff;
}
.breadcrumb-trail a.trail-begin {
	font-size: 0 !important; 
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Sorry for our delayed response, to remove the opacity from the masonry element on hover, on the page you linked to, please try this css:

#top .av-hover-overlay-fade_out .av-masonry-entry:hover .av-masonry-image-container {
    opacity: 1;
}

For the second issue please try this css:

@media only screen and (min-width: 768px) and (max-width: 989px){
.responsive.html_mobile_menu_tablet.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 88px !important;
}
}

To center the masonry title please change this css:

/* Title Position and Caption Box Size */
.av-masonry-entry .av-masonry-entry-title {
text-align: center !important;
position: absolute;
bottom: 5px;
padding: 5px;
}
/* Title */
#top .av-masonry-entry-title {
font-size: 120% !important;
color: #555555;
line-height: 1.6;
font-weight: 600;
letter-spacing: .08em;
text-align: left !important;
text-shadow: 2px 2px 0px rgba(133,133,133,.4)!important;
margin-left: 5%;
}

to this:

/* Title Position and Caption Box Size */
.av-masonry-entry .av-masonry-entry-title {
text-align: center !important;
bottom: 5px;
padding: 5px;
}
/* Title */
#top .av-masonry-entry-title {
font-size: 120% !important;
color: #555555;
line-height: 1.6;
font-weight: 600;
letter-spacing: .08em;
text-shadow: 2px 2px 0px rgba(133,133,133,.4)!important;
width: 100%;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

This CSS seems to be overriding the other buttons:

#top #wrap_all .single_button .button, #top #wrap_all .shop_columns_5 .avia_cart_buttons .button {
    color: #ffffff!important;
    border-color: #062857!important;
    border-radius: 160px!important;
    border-width: 1px!important;
    padding: 15px;
    font-size: 16px!important;
    font-weight: bold!important;
    background-color: #084a79!important;
}

I’m not sure exactly where that is added, but if you could try to remove the !important part, then the CSS I posted should likely apply after that.

Best regards,
Rikard

Hi,

Please try this CSS as well:

@media only screen and (max-width: 767px) {
.aviaccordion-title {
    font-size: 10px;
}
}

Best regards,
Rikard