Hi,

Thanks for the update. I see where you have added a class now. Please try this CSS instead:

@media only screen and (max-width: 767px) {
#footer-page .email-link a {
    font-size: 10px;
}
}

Best regards,
Rikard

Hi,

If you add a class to the link, then you can target it like this:

@media only screen and (max-width: 767px) {
#footer-page a.your-class {
    font-size: 10px;
}
}

Best regards,
Rikard

Hi,
Thanks for your question, to make your red reservation icon half of its size on mobile you could use this css:

@media only screen and (max-width: 767px) { 
.avia-icon-list.av-iconlist-big .iconlist_icon {
    height: 32px;
    width: 32px;
    line-height: 32px;
    font-size: 16px;
}
}

but this will also affect some of your other icons, so you should add a custom class to all of your reservation icons and modify the css to include the custom class.
The two icons in your footer, RG and Blue Book, have a width of 12.5% on desktop, and a width of 48% on mobile, so to make them have a width of 12.5% on mobile you could use this css:

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all .slide-entry.av_one_eighth {
    width: 12.5%;
}
}

If you find this affecting other icons then you could also add a custom class to them.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Please try this CSS instead:

.wp-block-table th {
font-size: 16px;
font-weight: bold;
color: #222;
padding: 5px;
}

.wp-block-table td {
font-size: 16px;
color: #666;
text-align: left; 
padding: 5px;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background-color: #e4f1f5;
}

Best regards,
Rikard

Hi,

Please try this in Quick CSS:

.wp-block-table th {
font-size: 16px;
font-weight: bold;
color: #222;
}

.wp-block-table td {
font-size: 16px;
color: #666;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background-color: #e4f1f5;
}

Best regards,
Rikard

Hey cktanju,

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

.home .avia-slideshow .slideshow_align_caption a {
    font-size: 26px;
    background: red;
}

Best regards,
Rikard

Hi,

If I change a button font size in the custom elements , all the buttons on my page

Please note that only locked options or values will be shared across all CETs in the site. If you created a CET from a Button element for example and locked the value of the Button Label field, all CET instances in the site will share this label or value. So when you edit the Button Label of the CET Button again, all CET instances will inherit the updated label value.

Scenario 1:

1.) Create a CET from a Button element.
2.) Lock the Button Label field with the value “Click me!”.
3.) Add instances of CET Button in 3 different pages or different areas in a single page.
4.) All buttons will have the label “Click me!” by default.
5.) To edit the CET again, go to the “Custom Elements” tab and click the “Edit Custom Elements” button.
6.) Edit the CET Button again by clicking the pencil icon.
7.) Change the label to “Do not click me!”, save the changes.
8.) All instances of the CET Button will be updated and will now have the label “Do not click me!”.

Best regards,
Ismael

Hey navindesigns,

Thank you for the inquiry.

You can use this css code to adjust the size of the buttons on smaller screens.

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

  /* Add your Mobile Styles here */
  .responsive #top .av-kw1jnirn-7aeec02aee509ff49f6cdea556f5817f__0 .avia-button {
    font-size: 13px;
    padding: 8px 18px 6px;
  }
}

We used the unique identifier (uid) of the slider as a selector so the css rule above should only change the size of the buttons within that slider.

Best regards,
Ismael

Hey sroetheli,

You can set the general font size of the site for each screen size under Enfold->General Styling->Typography.

Please try this in Quick CSS to adjust the font size of the mobile menu:

@media only screen and (max-width: 767px) {
#av-burger-menu-ul li a {
  font-size: 14px;
}
}

Best regards,
Rikard

Hi Philippe,

Thanks for reaching out to us, and for using Enfold. Everyone has their own preferences as to what they think is appealing on a website, but most things are possible to set and change in the theme options. If you want to change the fonts and sizes, then you can do so under Enfold->General Styling->Typography for example, and further settings can be made under Enfold->Advanced Styling.

You should need further help, then please let us know what you would like to change on your sites. Please share screenshots with us if possible, since it makes it easier for us to understand what you are trying to achieve.

Best regards,
Rikard

Hi,

Try this instead:

h2.gform_submission_error {
  font-size: 16px !important;
}

Best regards,
Rikard

Hi,

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

h2.gform_submission_error {
  font-size: 16px;
}

Best regards,
Rikard

Hi,

Thanks for the apology, it’s appreciated. If I suggest a to use a different element or a different way of doing something, it’s not to be rude. I’m only trying to help you out to have a better interaction with the theme.

Please help me understand why the special headings element works and the text element I was using does not. I do understand that only putting the 72px value in and nothing else means everything is set to 72px I’m confused about this part though….Each of those elements has the same text size component, where you can leave it blank or insert your desired text size for each screen size. I did that on the text element I initially used but it didn’t work. I had only placed text sizes in the last two screen sizes previously, but in the special headings element, I went ahead and filled in the size for each screen. Could that be part of the problem? Must you fill in all the text sizes for it to work properly?

This is what I tried explaining with the first test page I linked to. If you add inline CSS to any html markup, then in most cases it will override any other CSS which is trying to set the same value. I’ll try a different example:

//This text will override theme settings, and will always show at 70px
<h1 style="font-size: 70px;">My heading</h1>

//This text should get its size from the theme settings
<h1>My heading</h1>

Special Heading element – will get its styling from the theme settings. You can set the responsive font sizes under Enfold->General Styling->Typography. You can also set styling under Enfold->Advanced Styling.

Text Block element with responsive font settings – If you use a Text Block element and you set font sizes for each screen size in the element options, then that should override the general theme settings. Please note that you need to set values for all screen sizes, otherwise the last value set will apply to smaller screens.

I hope that explains it a bit clearer.

Best regards,
Rikard

Hi,

Thanks for the update. Please try to remove the CSS I referred to above, then make the settings you would like to have under Enfold->General Styling->Typography. Look for the Default content font size option.

Best regards,
Rikard