Hi Victoria,

the test website is on our local server, the problem occurred after installing the coding-solution for the separated icons in the phone info, header-extra-elements, from mike, a team member of yours:

———————–

In Enfold Theme Options > Header > Extra Elements > Phone Number or small info text:

<ul class=”contact”><li class=”phone”><span class=”in1″>[av_font_icon icon='ue854' font='entypo-fontello' size='20px'][/av_font_icon]</span> (555) 555-5555 | <li class=”mail”> <span class=”in1″>[av_font_icon icon='ue805' font='entypo-fontello' size='20px'][/av_font_icon]</span> (Email address hidden if logged out) | <li class=”local”> Bussiness in the Greater Metro Area – <u>Call Us Today: (555) 555-5555</u>

In Quick CSS:

.in1 {display: inline-block !important; }
.contact ul {list-style: none!important; list-style-type: none!important;}
ul li { display: inline!important;}

———————-

In the live website we use a different coding, therefore the icons are not separated, but the menu function is fine, in mobil version too:

Seems to bee pretty difficult, to set separated icons in the header-extra-elements of enfold.

So, we are still looking for a solid solution of this problem, it would be great, if you could give us a hint.
Thanks a lot and
best regards from Munich,
Paul

Hi,
ok, thanks for your help. You can close the topic.

For those who are interested this is the CSS code for a grey box with image on the left:

.grey-box {
	background-color: #e6e6e6;
	margin-bottom: 15px;
	margin-top: 15px;
	padding: 25px;
    display: flex;
}

.grey-box .image-section {
	width: 25%;
    font-size: 10px;
	font-family: Monserrat;
	font-weight: 500;
	line-height: 1.6;
}

.grey-box .text-section {
	width: 75%;
  	padding-left: 25px;
  	padding-right: 25px;
	font-size: 10px;
	font-family: Monserrat;
	font-weight: 500;
	line-height: 1.6;
    flex-direction: column;
    display: flex;
    justify-content: center;
}

.grey-box .text-section p {
	margin: 0px;
}

@media (max-width: 600px) {
  .grey-box {
      padding: 15px;
      display: block;
  }
  
  .grey-box .image-section {
  	  margin-bottom: 15px;
      width: 100%;
  }
  
  .grey-box .text-section {
      padding: 0px;
      width: 100%;
  }
}

And the html in the post editor:

<div class="grey-box">
<div class="image-section">
<img class="alignnone wp-image-1590 size-medium" src="xxx.jpg" alt="" width="234" height="300" /><br>Caption if needed
</div>
<div class="text-section">
Aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quialiquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quialiquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quialiquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quialiquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa quialiquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa </div>
</div>

Yes, could be done with <figure> element also. ;-)

Best Regards

• This reply was modified 8 years, 2 months ago by Sigmund.

I would like to change the font-size of the button in the Menu on blog pages.
example page: https://dawn.foodstijl.nl/2018/01/19/wedding-cake-with-roses/

I’ve tried several ways to do this, perhaps you guys can help?

I have fixed the issue by adding custom css without the ‘av-no-preview’ bit:
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.responsive #top #wrap_all .av-small-hide,
.responsive #top #wrap_all .av-small-font-size-hidden,
.responsive #top #wrap_all .av-small-font-size-title-hidden{display:none;}
}

The medium screen is picking up this style which is being adding in the footer of the page.

@media only screen and (max-width: 989px) and (min-width: 768px)
(index):390
.responsive #top #wrap_all .av-medium-font-size-14 {
font-size: 14px !important;
}

This is the style that has been added to hide captions but it is not being picked up cos the av-no-preview style isn’t on the page. Seems to be the root cause?

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
.responsive.av-no-preview #top #wrap_all .av-small-hide,
.responsive.av-no-preview #top #wrap_all .av-small-font-size-hidden,
.responsive.av-no-preview #top #wrap_all .av-small-font-size-title-hidden{display:none;}
}

I want to increase the font size of the caption title and text only on mobile as it is very small.

Great, thanks. What about the font size on mobile? It is very very small. How can I increase it?

Hi Nikko! Thank you for your fast reply. I’m one step further but the icon is not vertically centered. This is the current code:

.infotipsbox .avia_message_box_content {
text-transform: none !important;
font-weight: 500 !important;
font-size:16px !important;
text-align: left !important;
position: relative;
padding-left: 60px;
}
.infotipsbox.avia_message_box.avia-border-solid {
border-width: 1px !important;
border-radius: 9px !important;
}
.infotipsbox [data-av_icon]:before {
font-size: 40px !important;
position: absolute;
right: 10px;
}
.avia_message_box_content p {
vertical-align: super !important;
margin-left: 0; !important;
}

Hi Rikard

Yes, I made some progress since writing the email, though I’m still working in the dark really!

I’ve used the Enfold color section to achieve the semi-transparent background, whereas I think there is a HTML or CSS way of doing that?

The other question I have is regarding the included song titles, which are sent from the stream host server (Shoutcast) and pasted into an Enfold code block.

A Javascript widget provides this data though I don’t know how to change the font size and colour, which I’d like to do if possible.

I’ve sent the script in the Private Content section.

What I’m really trying to achieve, but cannot think its possible, is a pop-up like the one on this trial site, the pop-up is linked to the third icon in the group that starts ‘Listen Live’:-

https://harmony-fm.com/newsite/#

This is built on a template (Joomla) and this is the best pop-up I have ever seen for a radio station, but I don’t want to use Joomla.

Many thanks,

Mike

• This reply was modified 8 years, 3 months ago by harmonyfm.

Can you tell me what the General Layout Dimensions should be to get the site to look like the Enfold Church Demo please.

If you look at my site and then the Enfold Church Demo the container on my site is far too wide.

Is there anything in the Quick CSS that is causing the problem?

++++++++++++++++++++++++++++

.widget ul li a {
font-size: 16px !important;
}

.html_elegant-blog #top .avia-content-slider .blog-categories.minor-meta {
display: none;
}

.avia-content-slider-inner .slide-content .entry-content-header span.av-vertical-delimiter {
display: none;
}

#top .widget_nav_menu ul ul li:before {display: none !important;}

#header_main {
background-color: #fff;
}

.responsive .container {
max-width: 100% !important;
}

#footer .widgettitle {
font-size: 20px;
color: white!important;
}

.phone-info { font-size: 14px; }
#top .social_bookmarks li a { font-size: 16px; }

#top .main_menu .menu li ul a { font-size: 16px; }

#top .av-main-nav ul a { padding: 3px 15px; }
.sub-menu li { border-bottom: 1px solid #11abd6; }

.header_color .main_menu .menu ul li a:hover{background-color:#f8f8f8;}

#top .av-main-nav ul {
width: 210px;
}

p a { text-decoration: underline !important; }

aside a[href^=”mailto”] { text-decoration: underline !important; color: #1a43ca !important; }
aside .avia-button { color: white !important; }

.sidebar .textwidget {
font-size: 15px;
color: #000000;
}

.main_color table caption, .main_color tr:nth-child(even), .main_color .pricing-table>li:nth-child(even) { color: inherit; }
tr:first-child th, tr:first-child td,tr th:first-child, tr td:first-child,td { border: none !important; }

body {
font-size: 16px;
}

#top table tr th, #top table tr td {
border: 1px solid rgb(124, 124, 124) !important; }

.wpcf7-form select, .wpcf7-form input, .wpcf7-form textarea {
border: 1px solid #a1c8f1 !important;

}

.image-overlay {
visibility: hidden;
}
.avia_transform .envira-gallery-wrap a .image-overlay { display: none !important; }

.avia-builder-el-first .content {z-index: -100 !important; }

Hi again,

for now i have removed this code which displays “Menu” word under menu icon on mobile because i was losing sales. But when i add this code i see “Menu” word under each menu item multiple times.

I have explained issue above when i add this code what happens.

@media only screen and (max-width: 767px) {
.responsive #top .av_mobile_menu_tablet .av-main-nav .menu-item-avia-special a:after {
content: ‘Menu’;
color: #ffffff;
display: block;
line-height: 10px;
margin-top: -20px;
font-size: 14px;
}}

Thanks
Aadil