HI,

I need help with menu item font size, which should getting smaller on low res displays.
You can try use browser zoom to see what am I talking about. Letters getting bigger and items cover each other, first item just disappearing from the right sight because i’ve disabled wrapping.
So I still need solution with resizable font.

Thank you in advance,
Serge

Hi Ismael,

I think, I got it … I have allowed myself to “steal” this part of code with Firebug from the About Page, hope this is okay:

/* TeamMember */

.avia-team-member .team-social {
    border: 7px solid rgba(0,0,0,0.1);
    position: absolute;
    font-size: 19px;
    background: #fff;
    background: rgba(255,255,255,0.7);
    opacity: 0;
    visibility: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    border-radius: 3px;
}

#top .team-member-name {
    background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
    clear: both;
    color: #fff;
    float: left;
    font-family: "Open Sans";
    margin: 0;
    padding: 5px 17px;
    position: relative;
    top: -100px;
    z-index: 5;
}

#top .team-member-job-title {
    background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
    clear: both;
    color: #fff;
    float: left;
    font-family: "Open Sans";
	font-size: 13px;
    margin: 0;
    padding: 5px 17px;
    position: relative;
    top: -100px;
    z-index: 5;
}

#top .team-member-job-title a {
    color: #ffffff;
	text-decoration: none;
	font-weight: normal;
}
#top .team-member-job-title a:hover {
	font-weight: bold;
}

which looks now like

Thank you — SOLVED —

Thank you Vinay.
I deleted all CSS but the problem remains.
I also tried your CSS but it does not remove the issue.
I have also tried disabling plug-ins.
See css in use (bottom)

One thing: I used to use Propulsion theme installed. But I have now deleted. Could this be the problem?
I will provide log in information on Monday

Thank you

CSS IN USE:

#footer .widgettitle {
font-size: 12px;
}

strong.logo {
top: 13px;
}

.page .page-thumb {
display: none;
}

#socket .av-social-link-facebook a {
color: #fff !important;
background-color: #37589b !important;
}
#socket .av-social-link-twitter a {
color: #fff !important;
background-color: #46d4fe !important;
}
#socket .av-social-link-youtube a {
color: #fff !important;
background-color: #a72b1d !important;
}
#socket .av-social-link-gplus a {
color: #fff !important;
background-color: #de5a49 !important;
}
#socket .av-social-link-rss a {
color: #fff !important;
background-color: #ffa133 !important;
}

#header_main > ul > li > a.cart_dropdown_link span {
font-size: 22px;
}

.content, .sidebar {
padding-top: 22px;
padding-bottom: 22px;
}

body .column-top-margin {
margin-top: 22px;
}
.av-special-heading {
margin-top: 22px;
}

#top div .widget_shopping_cart .button { float: left; }

#top.single-post .big-preview.single-big {
display: none;
}

.single-post .post-entry .big-preview{ display: none !important; }

.onsale { display: none !important; }

@media only screen and (max-width: 768px) {
ul.cart_dropdown { display: none!important; }}

.avia_textblock a { text-decoration: underline; }

#scroll-top-link { display: none; }

@media only screen and (max-width: 480px) {
#top .social_bookmarks { display: none !important; }}
© 2016 Microsoft Terms Privacy & cookies Developers English (United Kingdom)

Thank you Rikard!

That worked on one page but not others, which are still going back to orange when I’m in that section. And it has changed the color of the list in the mega menu to green as well; tried to affect those through ul li, but I feel like I’m just having to do too much coding for this, and probably not doing it well; I think I need to just hire someone rather than keep bothering you guys. Obviously a second colorway in the main menu is not part of the theme (though I imagine it would be something people would use if it were!)

The mega menu is particularly difficult for us newbies to affect; it’s nearly impossible to inspect and you get asked a lot of questions about it. It would be great if you could give us a list of css “calls” that affect all the levels of these.

I wish I could just have set up a menu class and done it that way but that didn’t work either.

#menu-item-2641 a, #menu-item-2641 a {
font-size: 23px;
}
#menu-item-9 li li a, #menu-item-2641 li li a {
font-size: 14px !important;
}
#menu-item-2641 a:hover {
color: #949243 !important;
}
#menu-item-2641 li a {
color: #949243 !important;
}
.current-menu-item a .avia-menu-text {
color:#949243 !important;
}
#header .mega_menu_title {
font-size:15px !important;
}
#mobile-advanced ul a {
font-size: 13px !important;
color: 000 !important;
}
#mobile-advanced li a {
font-size: 13px !important;
color: 000 !important;
}

Well, I spoke too soon.

Logo Resizing on IPad

I want to show a unique wide horizontal logo on mobile devices. I have it working now on an IPhone by specifying a unique image in functions.php for the mobile logo as specified in your help. I display the horizontal image with a backgound color identical to the header color, and with a fixed width specified in quick css as:

@media only screen and (max-width: 767px) {
#header_main .inner-container {
height: 100px;
}
.responsive .logo img {
max-height: 100px;
max-width:250px;
height:100px !important;
width:250px !important;

}}

This works perfectly on the IPhone, either in regular or landscape mode. On the IPad, however, it replaces the logo as it should, but it resizes the logo according to the width, which is exactly what I don’t want. I either want the IPad to use the standard logo, and let it resize it, or use the mobile logo, and don’t resize it. How can I do either?

Drop down menus on IPad

Drop down menus work perfectly on all devices, except the IPad in Vertical Orientation, where the background color changed to the top level menu selection color. In horizontal mode, it works fine. On every other device it works fine. It’s just on the IPad Vertically it does this. Why? Just as FYI, I used the following Quick CSS to highlight the top level menu on hover.

#avia-menu li:hover a {
background: #720903;
font-weight: bold;
}

I am literally going out of my mind trying to fix these things..

And uor costum css is:

Enfold costum CSS:

#footer { font-size: 14px !important; }

.header_color .main_menu ul:first-child > li> a { font-weight: 700;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
}

.header_color .main_menu ul:first-child > li> a { font-weight: 700; text-transform: uppercase;}

.av-main-nav > li:first-child .avia-menu-text{ border-left: 0; }
.av-main-nav > li:last-child .avia-menu-text{ border-left: 0; }
.avia-menu-fx{ display: none; }
.av-main-nav > li > a > .avia-menu-text{ border-left: 1px solid #e2e2e2; padding-left: 20px; }

#top .main_menu .menu li ul a {
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif;
font-weight: open sans;
font-weight: 700;
text-transform: uppercase;}
}

.main_color .image-overlay .image-overlay-inside::before {
background-color:#F40 !important;
}

h2, h3, h4, h5 {
font-family: ‘Century Gothic’, CenturyGothic, AppleGothic, sans-serif;
}

.widget_nav_menu a {
font-family: ‘Century Gothic’, CenturyGothic, AppleGothic, sans-serif;
}

.widget_nav_menu a { font-size: 16px !important; }

Hello:

I recently update wordpress and my enfold theme and it seems that the quick css you gave me is not working. The menu fonts are small and the menu items are shoved tight to the right of the screen. I could use some help. The quick css i have is below. Can you let me know what the correction is please:

@media only screen and (max-width: 1200px) {
#top #header .av-main-nav > li > a {
font-size: 16px !important;
}
}
span.comment-count {
display: none;
}

#top .widget li a {
color: white;
}

#top .widget .children{
margin-left: 9px;
}

I have used this – <span style=”font-family: Century Gothic; font-size: 70px;”>

• This reply was modified 10 years ago by WREN-Services.

1. Thank you very much!!!! It works Great!
2. Sorry, but i wait too much time and found how to make what i want other way (using functions.php and custom css). Images looks fine but i cant do smooth animation of fade like in case with <div>. Link with cutted image attached. And if you can fix it help me with zoom animation like i have now with normal image on mouse over.

And now i have one more task with menu I cant solve:
In my macbook 13 with Retina Menu Items looks fine but if someone uses low resolution for example 1366×768 and close to this they are facing with https://mail.google.com/mail/u/0/?ui=2&ik=dcc23ead88&view=att&th=153388f239642324&attid=0.1&disp=safe&zw
and https://mail.google.com/mail/u/0/?ui=2&ik=dcc23ead88&view=att&th=153388f239642324&attid=0.2&disp=safe&zw

i’ve tried to put
.header_color .main_menu ul:first-child > li.current-menu-item > a, .header_color .main_menu ul:first-child > li.current_page_item > a { color: #3d2312;
font-size: 30px;
text-shadow: 0 0 12px white;
font-family: ‘eurofurence_light’;
background: transparent;

}

#avia-menu li:hover a {
font-size: 32px;
text-shadow: 0 0 3px white;
glow: white;
color: #3d2312;
border-radius: 2px !important;
}

into @media only screen and (min-width: 1200px) {} but still have no result.

How can i fix?

Thank you in advance!

Hey Rikard,

I tested two ways table:
1- Using the element “Text Block” by inserting the html table.
2 Using the element “Code Block” iserindo the html table.

Both did not work.
The idea of using the element “text block” is the reason of the table visually appear in wordpress and so have a more simple and easy editing.

All this because I have not found an editable element with this table structure:

<table>
<tbody>
<tr>
<th colspan=”2″ scope=”col”>TITLE</th>
</tr>
<tr>
<td rowspan=”4″>image</td>
<td>TEXT</td>
</tr>
<tr>
<td>TEXT</td>
</tr>
<tr>
<td>TEXT</td>
</tr>
<tr>
<td>TEXT</td>
</tr>
</tbody>
</table>

Note: the table contains background colors, padding and font-size direntes.

Thank you.

Hi Andy,

I applied the code to the Quick CSS, but there is already code there. I applied the most recent code into the same box seeing as there is only one, so the Quick CSS box is filed as follows (see below), but no changes were made as a result. In other words, the text was not centered, the slider on the website still has the text awkwardly aligned to the top. Can you please tell me what to do next?

@media screen and (max-width: 767px) {
.ls-slide h3 { font-size: 9px !important; }
}

.menu li > a:after { content: ‘ ▾’; }
.menu li > a:only-child:after { content: ”; }

@media only screen and (max-width: 767px) {
.layer-textbox {
padding-top: 20px;
}
}

#mc_embed_signup .clear {
display: block;
visibility: visible;
height: auto;
width: auto;
}

.blog span.post-meta-infos * {
display: none;
}
.blog span.post-meta-infos time{
display: block;
}

.page-id-27.post-meta-infos {
display: none;
}