Hi,

Thanks for the update. The page you linked to on the staging site is still htaccess protected, but I checked your Quick CSS on the site you sent login details to, and it looks like you are overriding the theme settings with this CSS:

@media only screen and (max-width: 767px) {
p {
font-size: 18px !important;
/*line-height: 1.3em !important;*/
}
}

Best regards,
Rikard

Hi,

I tried your suggestion, and as I indicated before, it did not work. Adding the font size in css or inline makes to difference, the mobile settings are not responsive The font, remains at 72px on every screen.

But that is exactly what my example page showed you. If you add inline CSS, that will apply instead of any theme setting, since that CSS has a higher priority. If you don’t understand how CSS priority works, then please try to do a bit of research online.

This page will answer your question in the screenshot: https://wpexpert.se/enfold/text-block-font-sizes-example/

Not at all, I’m simply suggesting that when you design a website, it’s designed for the largest screen first, then the responsive settings adjust all the page elements to fit the appropriate size. That 72px value would still be there for the larger screens and naturally, adjust to smaller screens. That is how responsive websites are supposed to work.

You have explicitly told an element to be 72 pixels, with no further specification. How exactly should the theme then know when you want it to change, and on which screen sizes?

Best regards,
Rikard

Hi,

First of all, please try to calm down a little bit. If you don’t understand something, then it’s better to ask. I’ve made a test page for you, so that you can see what happens when you add CSS inline. The first header is a copy from your site, the second one is a Special Heading element from the Layout builder, and I’ve specified font sizes for different screen sizes in the theme options:

https://wpexpert.se/enfold/header-test-page/

As you can see, your heading is displayed at 72 pixels on all screen sizes, since the inline CSS has priority over other CSS, unless you have added !important to it. And as far as I can see, you have not specified font sizes for any other screen size. Are you suggesting that we override the styling you have added yourself? If so, then even the 72 pixel setting which you have added, would not be respected.

About the paragraphs on the other two page; I can’t see that you have made any font size settings on either page. Could you try to explain the problem a bit further?

Best regards,
Rikard

• This reply was modified 3 years, 5 months ago by Rikard.

Hey Sozo,

I’m not sure if I fully understand the problem you are having, but I’m guessing that you are referring to the page in private? If that is the case, then you have added the heading manually with the font size inline. Styling/CSS which is added inline will almost always override other CSS:

<h1 style="text-align: center;"><span style="font-size: 72px;">Our Store Policies</span></h1>

Maybe you could try using a Special Heading element instead?

Best regards,
Rikard

Hi A,

There were many errors in your custom CSS related to the way you add comments in CSS. I have corrected them. Following is the correct way of adding comments in CSS

/* Comment goes here */

And you had following custom CSS in Quick CSS field which was overriding default styling

#top .av-menu-button > a .avia-menu-text {
  font-size: 16px !important;
  font-family: 'Lato' !important;
  background: #9cae30 !important;
  border-collapse: separate !important;
  border-width: 0px !important;
  border-color: white !important;
  border-radius: 5px !important;
  color: white !important;
  opacity: 1 !important;
  padding: 10px !important;
  box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5) !important;
  -webkit-transition: 0.3s !important;
  -moz-transition: 0.3s !important;
  -ms-transition: 0.3s !important;
  -o-transition: 0.3s !important;
  transition: 0.3s !important;
}

I changed it to following

	#top .av-menu-button > a .avia-menu-text {
			font-size: 16px!important;
			font-family: 'Lato'!important;
			/* background: #9cae30!important; CAMBIO ANDREA  */
			border-collapse: separate!important;
			border-width: 0px!important; /* CAMBIO ANDREA 30/6/2022, prima c'era 1px */
			border-color: white!important;
			border-radius: 5px!important;
			color: white!important;
			opacity:1!important;
			padding:10px!important;
			/* box-shadow: 8px 8px 10px rgba(0, 0, 0, 0.5)!important; */
			-webkit-transition:	0.3s!important;
			-moz-transition:	0.3s!important;
			-ms-transition:		0.3s!important;
			-o-transition:		0.3s!important;
			transition:			0.3s!important;
                         border: solid !important;
	}

You can now change border color in Enfold theme options > Advanced Styling > Menu Item Button with Border :)

Best regards,
Yigit

Hi,
Thanks for the feedback, the css above should have replaced the text “home” with the house icon, this part of the css above makes the text “home” font size zero:

.breadcrumb-trail a.trail-begin {
	font-size: 0 !important; 
}

if you didn’t add this part because you want to see the “home” then add the color to it like this:

.breadcrumb-trail a.trail-begin {
	 color: #fff;
}

if this doesn’t help please link to your page so we can check.

Best regards,
Mike

Hi,

Thank you for the update.

Looks like an issue with font size switcher. Is this only happening in the home page? Please try to edit the home page and update it or edit the elements inside the page and resave them.

To hide the warnings/errors temporarily, please edit the wp-config.php file and set the WP_DEBUG_DISPLAY constant to false.

// https://wordpress.org/support/article/debugging-in-wordpress/#wp_debug_display

Best regards,
Ismael

Hey Mountain,

Thank you for the inquiry.

The color of the text in the input field is already set to black when we checked. Did you add this css code?

#mainContainer input.count {
    width: 40px !important;
    margin: 0px 5px;
    font-size: 1.2rem !important;
    color: #000!important;
}

Best regards,
Ismael

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