Hi there
Im not sure what you did to fix that but I had to make some other changes to the site and custom CSS and now the pocket menu text isn’t showing on mobile again.
Also I had another request in for the size of the cart that shows in the main menu – the client now changed their mind as there were still display issues on the sub pages where it wasn’t sitting inline with the menu items so I removed any custom coding to set it back to default but its not still dropping down below the menu area instead of lining up on mobile viewing.
here is the site link: http://test.natashasolley.com
Here is my Quick CSS coding:
Quick CSS
@media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #socket .sub_menu_socket {
display: block !important;
}
}
#socket .sub_menu_socket div {
overflow: visible;
}
#socket .menu {
margin-top: -6px;
}
#socket {font-size: 14px;
}
.avia-button.avia-size-x-large {
padding: 15px 25px 15px;
font-size: 25px;
min-width: 100px;
}
/* General Template Headers Events*/
h2.tribe-events-page-title {
font-size: 45px !important;
font-weight: bold;
position: relative;
z-index: 0;
margin-bottom: .5em;
text-align: center;
clear: none;
}
span.tribe-events-list-separator-month {
font-size: 25px !important;
font-weight: bold;
color :#29c4f3 !important;
}
td.tickets_name {
white-space: normal;
}
span.date-start.dtstart {
font-size: 21px !important;
font-weight: bold;
color :#29c4f3 !important;
}
span.end-time.dtend {
font-size: 21px !important;
font-weight: bold;
color :#29c4f3 !important;
}
.tribe-events-meta-group.tribe-events-meta-group-gmap {
width: 100% !important;
}
Hi!
The thumbnail size on http://www.manufactura.cz is only 220x220px while the product thumbnail on this page is 450x450px. That’s why it looks sharper. Try to increase the catalogue thumbnail size then regenerate the thumbnails.
EDIT: I checked the page again and it looks sharper than before. I noticed that you increase the thumbnail size to 450x450px. The only issue that I can see now is the price font being a little bit muddy. Try this to add this in the Quick CSS field:
#top .price, #top .price span, #top del, #top ins {
-webkit-transform: translateZ(0);
transform: translateZ(0);
-webkit-backface-visibility: hidden;
}
Best regards,
Ismael
This reply has been marked as private.
Hi there! Great WordPress theme! I am having a bit of an issue and maybe you can help. On the home page – if you scroll to the bottom you will see a tab element that I put in next to Latest News. Below the element, there is too much space. I want to shorten it up a bit. I have used quite a few quick CSS elements on this though and wondering if one might be interfering.
Also – there is a light gray horizontal line under the tab element. I am wondering where it came from and how I can remove it.
Here are all of the CSS elements that I’ve used:
#menu-item-search {display:none;}
h3 { font-size: 25px; line-height: 1.5em; margin-bottom: 8px; }
#top .av-submenu-container .container {
padding: 0 32px 0 !important;
}
.iconbox.iconbox_left {
padding-left:42px;
padding-right: 35px;
padding-top: 20px;
}
.content {
min-height: 500px;
}
#scroll-top-link { display: none; }
#footer {padding: 5px 0 10px 0; }
.responsive .av-image-hotspot{
height: 84px;
width: 84px;
line-height: 54px;
}
.av-image-hotspot-pulse {
display: none!important;
}
.avia-tooltip { width: 270px; }
#top .post-title a {
color: #A2BD77;
}
#top .main_color input[type=”text”] {
border-color: #d7d7d7;
background-color: white;
}
#top .main_color input[type=”text”], #top .main_color textarea{
border-color: #d7d7d7;
background-color: white;
}
.avia-image-container img {
border: 1px solid gray;
padding: 5px;
}
.avia-menu-fx {
display: none !important;
opacity: 0;
}
Hi Rikard, thanks for you help thus far, you don’t know how much I appreciate it. But unfortunately I’m still having trouble reducing the size of the font. It looks a lot better after add the latest code you’ve give me, but for some reason I can’t reduce the font any smaller. I’m tried editing the numbers for the font-size and font-weight, but for reason it made no difference at all.
I’ve provided a comparison pic of what I would like to font size to look like. Thanks again.
Image: http://postimg.org/image/72cxro6kz/
Hi!
Please try the following as well:
#header .mega_menu_title {
font-size: 12px !important;
font-weight: 500 !important;
}
Cheers!
Rikard
Hey there!
I have used Enfold a few times, and feel versed, but I can’t figure this problem out to save my life!
The page linked- some sections display just fine on mobile. Others do not.
I have tried new color sections, and font sizes etc. It seems like a bug or something that is making this off…
Any thoughts? It’s basically 6 identical color sections and 3 of them display different on mobile than the other 3.
Any help is appreciated!
Hi dethfire!
Please add following code to Quick CSS instead
.av-share-box ul li a {
font-size: 20px;
}
Cheers!
Yigit
How do I increase size of the social media icons in the share this entry bar?
I tried
.av-share-link {
font-size:30px;
}
but that just makes the tool tips bigger
thanks!
Hello Isamel,
I checked my homepage again on my iPod Touch, on iPhone 6 and all gadgets shows blurry text, price and pictures which comes from Woocommerce.
Pictures are not blurry initially and are 1000x1000px when uploaded. The same pictures are sharp when opened the item in shop. Problem is not with pictures becasue font is blurry as well. It is very easy to compare description under woocommerce products and description under portfolio items, both on homepage. Picutres are of the same quality. One of them are blurry, portolio pictures are sharp.
I changed pictures in woocommerce to 450×450 px. (I already had it a week ago with the same problem) regenerate thumnails and problem appears anyway.
Interesting is that on another page from my network: http://www.manufactura.cz/lakovanekrabice pictures are sharp. Original size is 1000x1000px as well.
Thanks for taking so much time to help me solve the problem!
Robert
Hey!
Please add following code to Quick CSS as well and adjust as needed
.header-message { font-size: 16px; }
Cheers!
Yigit
Hi erikvermeulen!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.widget .tribe-events-event-image img {
max-width: 20%!important;
border-radius: 100px;
float: left;
margin-right: 10px;
}
.widget .tribe-events-event-image {
margin: 0;
}
.widget h4.entry-title.summary {
float: left;
width: 0%;
font-size: 14px;
}
.widget .duration {
margin-top: 20px;
}
.widget ol.vcalendar {
margin: 0!important;
}
It should look like this – http://i.imgur.com/xSLWiEp.png
If that does not help, please post a screenshot and show the changes you would like to make.
Best regards,
Yigit
Hi Rikard, thanks for your reply. Is it possible to make the text not ‘bold’ and reduce the size of the font further? So it’s similar to my other drop down menus. Other than that, it is getting very close to what I would like to achieve. Thanks!
Hi,
the menu is not as it should after i updated enfold.
I use this code:
#top .main_menu .menu>li:last-child>a { padding-right: 15px; }
.header_color .main_menu ul { background-color: rgba(50,50,50,0.2); }
.bottom_nav_header.social_header .main_menu,
.header_color .main_menu ul:first-child > li > a { color: #666666; font-weight: 200; font-family: 'Cabin'; font-size: 12px; }
.header_color .main_menu ul:first-child > li > a:hover { color: #ffffff; }
.header_color .main_menu ul:first-child > li.current_page_item > a { color: #304a87; }
#top .main_menu .menu li ul a { font-size: 14px; }
.bottom_nav_header.social_header .main_menu ul:first-child > li a {font-size: 11px;}
.menu {max-width: 780px;}
@media only screen and (min-width: 768px) and (max-width: 989px) {.menu {max-width: 412px;}}
.html_boxed #main { padding-top: 50px; }
And i can’t figure out how to get this fixed.
The last menu point slips in the next line.
Regards Simon
Thanks so much! This did it. Can I also make the text a bit bigger? Is there some CSS that would allow me to change the font size of just that header message?
Hey!
I checked the site on my iPod and the fonts are not blurry any more. It looks sharp except for the price which is a little bit muddy. The price issue only happens on portrait mode. Regarding the images, the image quality is blurred initially like these images for example:
http://www.manufactura.cz/wp-content/upLoads/Sakai-Hoicu-Par-Slivoni-1_web-220×220.jpg
http://www.manufactura.cz/wp-content/upLoads/Sakai-Hoicu-Par-Slivoni-2_web-220×220.jpg
http://www.manufactura.cz/wp-content/upLoads/Hokusai_Vlna3-220×220.jpg
Try to upload larger images. Go to Woocommerce > Settings > Products > Display pane. Change the catalogue image size, currently set to 220x220px, then regenerate the thumbnails: https://wordpress.org/plugins/regenerate-thumbnails/
Regards,
Ismael
Hey carlosamil!
Please try the following in Quick CSS under Enfold–>General Styling:
Title
.title_container .main-title{
font-size: 20px !important;
}
Breadcrumb
.breadcrumb-trail{
font-size: 14px !important;
}
Cheers!
Rikard
Hi
I have added an icon to the phone number above the header. I would like to change the line height to 18px.
I current have this:
<span class=”custom-text”>REQUEST FREE CONSULTATION </span><span class=”custom-number”>[av_font_icon icon='ue799' font='mobile2' style='' caption='' link='' linktarget='' size='28px' position='left' color=' #00b395'][/av_font_icon] 619.237.3490</span>
Also, can i add text above the phone number. eg. REQUEST FREE CONSULTATION (in small text above number rather than at side)
Appreciate your help,
Mike
-
This topic was modified 10 years, 11 months ago by
brooks.
Hey djshortkut!
Please add following code to Quick CSS
.custom-icon .av-icon-char {
font-size: 60px!important;
}
Cheers!
Yigit
Hi!
Please add following code to Quick CSS as well
.phone-info { font-size: 20px; }
Regards,
Yigit
works Excellent thanks!
and how do I increase the phone number font size ?
Hey!
Please add following code to Quick CSS
@media only screen and (max-width: 767px) {
#top #wrap_all .av_header_transparency, .av_header_transparency #advanced_menu_toggle {
background-color: transparent;
position: absolute!important;
}
#top #wrap_all .alternate_color h2 {
font-size: 40px;
}}
Regards,
Yigit
Hi Yigit, that worked perfectly at reducing the size of the font. But unfortunately the menu boxes is still very big and taking up a lot of space. Is there a way to minimize the size of the boxes?
Here’s a link to my site: https://vipoffers.club/ (The menu in question is the “Categories” menu)
Thanks!
Hello, i would like to know if there is a change to change font size on Title elements and breadcrumbs on Enfold theme. I was looking for advanced styling, but i can’t find anything about this.
Thanks!!
Best regrads
URL: http://www.londonhouse-norfolk.co.uk
Hi there,
How can I style the background colour of columns?
If I set a colour code in here:[av_textblock size='' font_color='' color=''], nothing changes.
E.g.[av_textblock size='' font_color='' color='#9AFE2E']
Am I missing a step?
Thanks for your help.
This reply has been marked as private.
Hey shoo!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.avia_mega_div * { font-size: 12px !important; }
If that does not help, please post the link to your website
Best regards,
Yigit
Hey!
Please add following code to Quick CSS
.first-table-item {
font-size: 20px;
}
Cheers!
Yigit
@begrafiks & Yigit,
Thanks for your replies. I tried the CSS modifications but they didn’t change the font size.
I created a custom class in my child theme CSS and applied that to divs within each accordion container. That worked. It may not be the most efficient way but it does the job.
Yigit, please mark this as resolved.
Thanks, Elliot!
The page is http://vacationrentalsecrets.com/101sessions/ and when you scroll to the pricing table you’ll see ’15 minute Session’, ’30 Minute Session’ and ’60 minute Session’.
Those are the three headers whose font size id’ like to increase.
Thank you.
Antonio