Hey steveorrmedia,
Thank you for your patience and the links, so based on your description for the first three issues, that are all for heading text being cut off at screen sizes below 480px, while it is possible to break the words with a hyphen, I don’t think this will look good so a better option is to reduce the font size for small screens.
The Special Heading element that you are using on these three pages has an option to do this, please go to the styling tab and look for Heading Font Sizes then click the icon for the small device screen and adjust the font size to about 37px.

You could also adjust the Subheading Font Sizes if you wish. I did this for your /message-development/ page special heading, and now the text fits at the smallest screen sizes, please clear your browser cache and check, and then try this for your other pages.
Fot your last issue with the logos being too close together on small mobile when they are in a single column, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 479px) { 
	#top .avia-logo-element-container .slide-entry {
    padding: 10px;
	}
}

and feel free to adjust the 10px to suit if it is not enough
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

Hey,

Please add the following code to the bottom of the Quick CSS field and adjust it as needed:

.avia-data-table td {
  font-size: 16px;
}

Best regards,
Yigit

Hi,

Thank you for the info.

Looks like the other slides still have the default h2 styles, not the styles set in the Styling > Font Sizes panel.

This is the custom style of one of the slides, configured in the Styling > Font Sizes.

#top #wrap_all .avia-slideshow .av-slideshow-caption.av-lhewf3ia-c0fce5f319dd1be36b426af6eda71d3c__7 .avia-caption-title {
    font-size: 36px;
}

And this is the default h2 style, which is still applied to some of the slider items.

#top #wrap_all .main_color h2, #top #wrap_all .alternate_color h2, #top #wrap_all .footer_color h2, #top #wrap_all .socket_color h2 {
    font-size: 15px;
    font-family: 'arial', Helvetica, sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

Please check the slider settings, then toggle or temporarily disable the Enfold > Performance > File Compression settings.

Best regards,
Ismael

Hi!

Thank you for the inquiry.

The following css rule appears above the header, which might be causing the issue that you described above. Did you add the code somewhere in the template files?

av-image-caption-overlay { bottom: -20px !important; font-size: 10px !important; height: auto !important; left: 50% !important; transform: translate(-50%) !important; width: 100% !important; text-align: justify !important; }

Cheers!
Ismael

Hey,

You have the following custom CSS code:

.av-fields-with-error {
  font-size: 20px;
  background-color: rgba(0,0,0,0);
  border: 0;
}

With this code you’re setting background color to transparent. Modify this code to change the background color.

Best regards,
Yigit

Hey OneOfMany,

Thank you for the inquiry.

You can adjust the font sizes for different screen width in the Enfold > Genera Styling > Typography panel. Additional style adjustments can be done in the Enfold > Advanced Styling panel.

Best regards,
Ismael

Hey charger70,

Thank you for the inquiry.

You may have provided a different URL. Please provide the URL of the site shown in the screenshot. Have you tried editing the Styling > Font Sizes settings of the slide?

Best regards,
Ismael

Hi,
I reviewed the code in the pastebin and it looks like the code was doubled, and this was noted in the other thread, so I removed the extra code and also commented out the extra line:
content_wrap.avia_swipe_trigger( {prev:'.av_prev_tab_section', next:'.av_next_tab_section'} );
and now the 4 icons are showing at the top in a grid instead of off the screen,

so if you are not seeing it like this then clear your cache or open a private window until you do.
If for small screens you want the 4 tabs to be in a single row, try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 430px) { 
	#top.page-id-196 .av-section-tab-title {
    padding: 1px 2px 0px 2px;
	}
	#top.page-id-196 .av-tab-section-icon {
    font-size: 20px;
	}
	#top.page-id-196 .av-inner-tab-title {
    font-size: 10px;
	}
	#top.page-id-196 .av-section-tab-title {
    width: 25%;
	}
}

this is the expected results:

Best regards,
Mike

Hi,
To have very large menu items and align them at the top try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top #av-burger-menu-ul {
	vertical-align: top;
}
@media only screen and (max-width: 767px) { 
#av-burger-menu-ul .avia-menu-text {
	font-size: 60px;
}
}
@media only screen and (min-width: 767px) { 
	#av-burger-menu-ul .avia-menu-text {
	font-size: 80px;
}
}

feel free to adjust to suit, this is the expected results:

Since the original question has been answered we will close this thread as it has now covered multiple topics, please note that we ask each thread to limit to one topic.
If you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike

Hi,
Thank you for your patience and the link to your site, I cloned your last slider item and saw the font size error on the frontend, it looks like the css for the slide was not added to the style for some reason, if you add this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field it will correct this if you want to add more slides:

#top #wrap_all .avia-slideshow .av-slideshow-caption .avia-caption-title {
    font-size: 36px;
}
#top .avia-slideshow .avia-caption-content p {
    font-size: 20px;
}

I didn’t add this and I removed the cloned slide I created.
I don’t know why this has occurred, I tried looking at your Enfold Theme Options ▸ Performance settings and your plugins, etc but didn’t find a cause.
I created a test page on my site with 10 slides and your layout and font sizes and they all worked correctly. So you could try using this css for now and if you find any other issues in the future perhaps they will also point to a cause for this.
Or you could try disabling all of your plugins. If that resolves the issue, reactivate each one individually until you find the cause.
Perhaps your server is also caching, so try clearing your server cache and if it is using object-oriented cache such as Memcached, Redis, Varnish, Litespeed, etc try disabling it to see if this helps. Otherwise if you don’t have any other issues I would try using the css for now.

Best regards,
Mike

Hello,

-upload for a long time (without send)
-contact form disappeared after long time

Please try deactivating all active plugins and check if that helps.

Again; the message when you enter wrong email is little, white background and not readable. Where can I change that?

Please add following code to bottom of Quick CSS field and adjust as needed:

.av-fields-with-error {
  font-size: 20px;
  color: orange;
  background-color: black;
}

Again; the border after clicking “send” become colored (yellow maybe..). Where can I change that color?

Please go to Enfold theme options > General Styling > Main Content and change the “Highlight Color”.

Best regards,
Yigit

Hi,

Thank you for the screenshot.

Looks like the caption title of the other slides have different configuration. Please edit the slider item, then look for the Styling > Font Sizes settings.

Best regards,
Ismael

Hi,
For your special heading subheadline, when you choose a special heading with a Subheading you will see a option in the font tab to set the font size, there is not a site wide font size for each specific element, but you could create a CET – Custom Element Templates and then use your element on your site. You can also do this for your buttons, or since your buttons are set to use the theme color you can change the color in your styling, but this will also effect other elements, so it would probably be better to create a “read more” CET button instead.
Hopefully this answers your two new questions, but please note that we ask that each thread stays on a specific topic, this helps other users find solutions based on the opening subject line quicker, and makes it easier for Mods to help. For further questions please open a new thread
Please let us know if your original question has been answered and we can close this thread, thanks for your understanding.

Best regards,
Mike

Hi,

Thank you for the update.

We can reproduce the issue but not yet sure what is causing it. It might be due to the hidden section on desktop and medium devices. Please try to add this css code and make sure to temporarily disable the Enfold > Performance > File Compression settings.

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

  .responsive.av-no-preview #top #wrap_all .av-desktop-hide,
  .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-hidden,
  .responsive.av-no-preview #top #wrap_all .av-desktop-font-size-title-hidden {
    display: none;
    height: 0;
  }
}

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

  .responsive.av-no-preview #top #wrap_all .av-medium-hide,
  .responsive.av-no-preview #top #wrap_all .av-medium-font-size-hidden,
  .responsive.av-no-preview #top #wrap_all .av-medium-font-size-title-hidden {
    display: none;
    height: 0;
  }
}

Best regards,
Ismael

Hi,

1. How can I re-sort the tabs in the tab section without having to create them again?

In the tab section element place your mouse over the double arrow in the tab and drag the tab to a new placement:

the tab number won’t change but the title and content will change.

2. I would like to have the symbol boxes without frames, but the symbols in the same size and view as symbol boxes with frames, or can I set the color of the text box to white or another color?

I assume this is your example:

I’m not sure that I understand your question, both elements are the same size, but the first one with no background color looks larger because it blends into the element padding.
If you change second one the background color to white it will look the same:

so I’m not sure what you want to achieve.It dose look like you are using a different font size for the first box:

Best regards,
Mike

Hi,

Please try this CSS as well:

#top label.input_checkbox_label {
    color: #919191;
    font-size: 15px;
}

Best regards,
Rikard

Hi,

1. https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_phoneto

2 and 3:

header_meta {
    background: #969696;
}

.phone-info div {
    color: #fff;
    font-size: 14px;
}

Best regards,
Rikard

Hi!

Thank you for the info.

Please look for this css modification in the Quick CSS field..

#top label.input_checkbox_label {
    font-size: 11px;
    line-height: 11px;
    font-weight: normal;
}

.. then, replace it with:

#top label.input_checkbox_label {
    font-size: 11px;
    line-height: 11px;
    font-weight: normal;
    top: 5px;
    position: relative;
}

Regards,
Ismael

Hi,
For border color, radius, and icon size try this css:

#top #header.header_color .widget input[type=text] {
	border-color: red;
	border-radius: 10px;
}
#top #header.header_color .widget #searchsubmit {
    border-radius: 0 10px 10px 0;
}

#top #header.header_color .widget #searchform #searchsubmit {
 	font-size: 30px;
}

This should also work on your live site.

Best regards,
Mike

Hi,
When I check it doesn’t look like you have made a choice for your font size:

after you make a choice remember to make it for each language and save.

Best regards,
Mike