Hi,

Please add following code to Quick CSS field in Enfold theme options > General Styling tab

#top .av-logo-container .social_bookmarks li a {
  font-size: 20px;
}

Regards,
Yigit

Hey AuroraArcus,
Thanks for the link to your page, I see the text overlap began at 1350px and below 400px the padding was adding to the problem so I recommend this css:

@media only screen and (max-width: 1350px) { 
#top .av-catalogue-title-container {
    font-size: .8em;
    line-height: 1em;
}
}
@media only screen and (max-width: 420px) { 
.responsive #top #wrap_all #av-layout-grid-1 .flex_cell {
    padding: 40px 20px !important;
}
}

After applying the css, please clear your browser cache and check.
For tablet and below the font change seems appropriate:

and for very small mobile devices the added padding change also helps:

Best regards,
Mike

Hey schwabino,

Thank you for the inquiry.

You can use this css code to adjust the style of the social icons in the top header.

#top #header_meta .social_bookmarks li a {
    width: 60px;
    line-height: 60px;
    min-height: 60px;
    height: 100%;
    font-size: 20px;
}

#header_meta .container {
    min-height: 60px;
}

Please make sure to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css.

Best regards,
Ismael

Hi,

Thank you for the update.

You can upload a custom svg file to the uploads folder or use the Media > Library to upload a media file, then use the following css code to adjust the style of the video controls.

.mejs-button>button {
    background: transparent url(mejs-controls.svg);
    border: 0;
    cursor: pointer;
    display: block;
    font-size: 0;
    height: 20px;
    line-height: 0;
    margin: 10px 6px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    text-decoration: none;
    width: 20px;
}

Replace the value of the background property with the custom svg file.

Best regards,
Ismael

Hey Mark,
Thanks for your question, have you added this css in the Quick CSS:

.pagination a,.pagination span {
    display: block;
    float: left;
    font-size: 11px;
    line-height: 13px;
    padding: 2px 9px 1px 9px;
    text-decoration: none;
    width: auto
}

If you have please remove it, if not please include admin login in the Private Content area so we can investigate.

Best regards,
Mike

Hi Franz,

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

.av-sort-by-term {
    font-size: 22px;
}

.av-sort-by-term a {
    color: red;
    font-family: verdana; 
}

.av-sort-by-term a.active_sort {
    color: blue;
}

Best regards,
Rikard

Hi,

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

#top .fullsize .template-blog .post-title {
    font-size: 20px;
    color: #003185;
}

Best regards,
Rikard

Hey Eleina,
Thanks for the link to your example, try adding this code to your Enfold Theme Options ▸ Header ▸ Extra Elements ▸ Phone Number or small info text

<ul class="topbar-contact"><li class="map"><span class="inline"><a href="#">[av_font_icon icon='ue842' font='entypo-fontello' size='20px'][/av_font_icon]Pet Street 123 - New York</a></span></li>  <li class="phone"><span class="inline"><a href="tel://1-555-555-5555">[av_font_icon icon='ue854' font='entypo-fontello' size='20px'][/av_font_icon]555-555-5555</a></span></li>  <li class="mail"><span class="inline"><a href="mailto: (Email address hidden if logged out) ">[av_font_icon icon='ue805' font='entypo-fontello' size='20px'][/av_font_icon] (Email address hidden if logged out) </a></span></li></ul>

and add this css to your Enfold Theme Options ▸ General Styling ▸ Quick CSS field

#header_meta .inline {display: inline-block;}
#header_meta .topbar-contact ul {list-style: none; list-style-type: none;}
#header_meta ul.topbar-contact li {display: inline;}
#header_meta ul.topbar-contact li a {vertical-align: middle;}
#header_meta ul.topbar-contact {margin-bottom: 0;}

this is the expected results:

Best regards,
Mike

Hi,
To have the large font on desktop also and have the links black, use this css instead:

#top .phone-info {
	font-size: 22px;
}
#top .phone-info a {
	color: #000;: 22px;
}

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

Best regards,
Mike

Hey diefleischerei,
To change your topbar text to links, you would wrap the text with html link tags like this:
Zum <a href="/newsletter/">Newsletter</a> und <a href="/shop/">Shop</a>
please note the links are examples so you will need to adjust the url “href” to your links.
To make the topbar text larger on mobile, try adding this css:

@media only screen and (max-width: 767px) { 
	#top .phone-info {
		font-size: 22px;
	}
}

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

Best regards,
Mike

Hey Lene,

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

.iconlist_icon span.iconlist-char {
  font-size: 60px; 
}

Best regards,
Rikard

Hey woogie07,

Please try this in Quick CSS:

.widget_recent_entries li a {
    font-family: inherit;
    font-size: inherit;
    font-style: normal;
}

Best regards,
Rikard

Hi,

Website 1
I checked your website on my iphone in landscape mode but it looks fine to me. Title font size is big however if you decrease it by referring to our previous replies, it should look great.

If I did not understand the issue, could you please post a screenshot and show the changes you would like to make? You can upload your screenshots on imgur.com and post the links here.

Website 2
5) Sidebar
It seems like “Do not show sidebar on smartphones” option not enabled in theme options. Could you please confirm that? If it is not enabled, then please check your custom CSS for following code

  @media only screen and (max-width: 767px)
.responsive #top #main .sidebar {
  display: none;
}

You can add following code to Quick CSS and change page ID (“page-id-6968” in example below) to display sidebar on mobile on specific pages

 @media only screen and (max-width: 767px) { 
.responsive #top.page-id-6968 #main .sidebar {
  display: block;
}}

6) Header
Please add following code to Quick CSS field in Enfold theme options > General Styling tab

@media only screen and (max-width: 990px) { 
#header_meta {
  display: none;
}}

Best regards,
Yigit