-
Search Results
-
In reply to: Responsive Background Image in Color Section
in order to get a responsive background, you have to include the aspect ratio of your image in the height calculation of the container.
So if you use an image in 16:9 format as a background, set the color-section to this relative height.
The best way is to give the color-section a custom class or a unique ID like on my test page: https://webers-testseite.de/responsive-colorsection/#responsive-bg { width: 100vw; height: 56.25vw; }on that the background is perfectly responsive – But what would you like to do if the container height does not offer enough place for the content?
You have to have on that case less content or totaly responsive content inside that container. That may lead to too small and non legible font-sizes.
See heading on mobile view f.e 375px screen width.In reply to: cant change font size left menu
hi jordan, yes, its smaller now because it dit it in the Quick CSS
ive put.html_header_sidebar #header .av-main-nav > li > a .avia-menu-text {font-size:13px !important;}but when i go to Enfold Advanced Style and i choose to edit the Main Menu Links and then i try to choose a smaller font instead of a smaller font its gonna manage the line height instead!
So, thats a bit strange, therefore i was wondering if it could have been a bug in Enfold itself…anyway, for now its oke, you can close this ticket, thanks anyway
best regards, jelleIn reply to: LayerSlider not responsive
Hi mbesh,
Layerslider reduces the text proportional to the reduction of the size of the slider, try to duplicate your text, then set the original to show in desktop and tablet (in Toggle device visibility) then the duplicate, hide in both desktop and tablet, then show only in mobile then increase its font size.
Hope it helps.Best regards,
NikkoHello , whenever i go to the advanced style to change the font size of the menu items pn the left, the only thing that changes is the height between the lines.
but that is not what i want…i want the font to be smaller….is it a bug maybe…?
i only could change it in the quick css via:
.html_header_sidebar #header .av-main-nav > li > a .avia-menu-text {font-size:13px !important;}can i remove the lines? and set the space between the menu items?
best regards, jelle
ps: also the logo…seems i cant get it smaller….if i take a sharp big logo and put it to 80×80 the logo becomes all vague…
In reply to: Post Slider Custumization
PS : here is my custom css for masonry & post slider
/* ————————MANSONRY———————— */
/* Modifier la taille et le style du texte dans masonry */
#top #main .av-masonry-entry .av-masonry-entry-title.entry-title {font-size:20px; color:#009da5; font-weight:400;}/* Modifier le texte du filtre masonry */
#top div.container .av-masonry .av-masonry-sort {font-size:20px; text-align:left; text-transform:uppercase; font-family:’Oswald’;}/* Cacher la date dans masonry */
#top span.av-masonry-date { display: none; }/* Ajoute une ombre aux vignettes dans masonry */
#top .av-inner-masonry {box-shadow: 0 0 10px rgba(0,0,0,0.1);}/* ————————Post Slider———————— */
/* personnalise les fleches de deplacement du slider */
.avia-slideshow-arrows a::before {border-radius: 0px;}/* Cacher la date */
.avia-content-slider .slide-meta .slide-meta-time {display: none;}/* Cacher les separator */
.avia-content-slider .slide-meta .slide-meta-del {display: none;border:none;}
.html_elegant-blog .avia-content-slider .slide-meta {display: none;border:none;}/* Cacher les Meta area */
.html_elegant-blog #top .post-entry .blog-categories {display: none;}/* marge du texte des vignettes */
#top .avia-content-slider {padding:0 10px;}
#top .avia-content-slider article.slide-entry {margin-bottom:40px;}#top .avia-content-slider .slide-content {padding: 30px 20px;}
/* personalisation du titre h3 */
.html_elegant-blog .avia-content-slider .slide-entry-title {text-align:left;letter-spacing: 0px;font-size:20px; color:#009da5; font-weight:400;}/* Ajoute un fond et une ombre aux vignettes */
#top .avia-content-slider article.slide-entry {box-shadow: 0 0 10px rgba(0,0,0,0.1);background: #F8F8F8;}
.avia-content-slider .slide-image img {border-radius: 0px;}
.avia-content-slider .slide-image {border-radius: 0px;}/* Text area */
#top .avia-content-slider .slide-content {padding:30px 20px;margin-top:-10px;}In reply to: H3 Tag in footer
Hi,
Thank you for the update.
This should be possible but we have to directly edit the enfold\includes\helper-privacy.php file. The heading element can be found around line 1847:
$sc_content .= "[av_heading tag='h3' padding='10' heading='{$heading}' color='' style='blockquote modern-quote' custom_font='' size='' subheading_active='' subheading_size='15' custom_class='' admin_preview_bg='' av-desktop-hide='' av-medium-hide='' av-small-hide='' av-mini-hide='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' margin='10px,0,0,0'][/av_heading]";Replace the value of the tag attribute or parameter.
Best regards,
IsmaelIn reply to: Amend font size in 'Blog Post' content element
Perhaps we’re talking at cross purposes, as (as you can probably tell!) I’m not a developer or designer. What I can assure you is that I have added the code you provided (below) to my quick CSS area, and when I change the font size in the code the font size changes on the front end. However, when I change the line-height there’s no change to the front end.
Should I give you access to the site so you can check this for yourself?
article.slide-entry h3.slide-entry-title a {
font-size: 24px !important;
line-height: 20px !important;
}In reply to: Icon boxes
Hi Charlotte,
You’re welcome, can you please replace the previous code I gave to this one (the difference is the two echos added):
function enfold_after_main_container() { echo '<div class="main_color container_wrap_first container_wrap fullsize"><div class="container"><div class="template-page content av-content-full alpha units"><div class="post-entry post-entry-type-page"><div class="entry-content-wrapper clearfix">'; echo do_shortcode("[av_one_fourth first min_height='' vertical_alignment='' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-713c9l'][av_icon_box icon='ue821' font='entypo-fontello' title='Boka hotell' position='left' icon_style='' boxed='' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#f7f1e4' custom_font='#5fa5b7' custom_border='#f7f1e4' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='manually,https://www.hotelladdict.se/boka-hotel/' linktarget='' linkelement='both' id='' custom_class='' av_uid='av-k64vcr3y' admin_preview_bg=''][/av_icon_box][/av_one_fourth][av_one_fourth min_height='' vertical_alignment='' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-6b29p5'][av_icon_box icon='ue806' font='entypo-fontello' title='Hundvänliga hotell' position='left' icon_style='' boxed='' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#f7f1e4' custom_font='#5fa5b7' custom_border='#f7f1e4' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='manually,https://www.hotelladdict.se/hundvanliga-hotell-skane/' linktarget='' linkelement='both' id='' custom_class='' av_uid='av-k64vcr3y' admin_preview_bg=''][/av_icon_box][/av_one_fourth][av_one_fourth min_height='' vertical_alignment='' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-4st921'][av_icon_box icon='ue81e' font='entypo-fontello' title='Hotelltips' position='left' icon_style='' boxed='' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#f7f1e4' custom_font='#5fa5b7' custom_border='#f7f1e4' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='manually,https://www.hotelladdict.se/hotelltips/' linktarget='' linkelement='both' id='' custom_class='' av_uid='av-k64vcr3y' admin_preview_bg=''][/av_icon_box][/av_one_fourth][av_one_fourth min_height='' vertical_alignment='' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-2icxhl'][av_icon_box icon='ue841' font='entypo-fontello' title='Boka hyrbil' position='left' icon_style='' boxed='' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#f7f1e4' custom_font='#5fa5b7' custom_border='#f7f1e4' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='manually,https://www.hotelladdict.se/boka-hyrbil/' linktarget='' linkelement='both' id='' custom_class='' av_uid='av-k64vdwhm' admin_preview_bg=''][/av_icon_box][/av_one_fourth]"); echo '</div></div></div></div></div>'; } add_action('ava_after_main_container', 'enfold_after_main_container');Best regards,
NikkoIn reply to: Icon boxes
Hi charlotteraboff,
Thanks for giving us admin access, this should be the code:
function enfold_after_main_container() { echo do_shortcode("[av_one_fourth first min_height='' vertical_alignment='' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-713c9l'][av_icon_box icon='ue821' font='entypo-fontello' title='Boka hotell' position='left' icon_style='' boxed='' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#f7f1e4' custom_font='#5fa5b7' custom_border='#f7f1e4' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='manually,https://www.hotelladdict.se/boka-hotel/' linktarget='' linkelement='both' id='' custom_class='' av_uid='av-k64vcr3y' admin_preview_bg=''][/av_icon_box][/av_one_fourth][av_one_fourth min_height='' vertical_alignment='' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-6b29p5'][av_icon_box icon='ue806' font='entypo-fontello' title='Hundvänliga hotell' position='left' icon_style='' boxed='' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#f7f1e4' custom_font='#5fa5b7' custom_border='#f7f1e4' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='manually,https://www.hotelladdict.se/hundvanliga-hotell-skane/' linktarget='' linkelement='both' id='' custom_class='' av_uid='av-k64vcr3y' admin_preview_bg=''][/av_icon_box][/av_one_fourth][av_one_fourth min_height='' vertical_alignment='' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-4st921'][av_icon_box icon='ue81e' font='entypo-fontello' title='Hotelltips' position='left' icon_style='' boxed='' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#f7f1e4' custom_font='#5fa5b7' custom_border='#f7f1e4' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='manually,https://www.hotelladdict.se/hotelltips/' linktarget='' linkelement='both' id='' custom_class='' av_uid='av-k64vcr3y' admin_preview_bg=''][/av_icon_box][/av_one_fourth][av_one_fourth min_height='' vertical_alignment='' space='' row_boxshadow='' row_boxshadow_color='' row_boxshadow_width='10' custom_margin='' margin='0px' mobile_breaking='' border='' border_color='' radius='0px' padding='0px' column_boxshadow='' column_boxshadow_color='' column_boxshadow_width='10' background='bg_color' background_color='' background_gradient_color1='' background_gradient_color2='' background_gradient_direction='vertical' src='' background_position='top left' background_repeat='no-repeat' highlight='' highlight_size='' animation='' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' id='' custom_class='' aria_label='' av_uid='av-2icxhl'][av_icon_box icon='ue841' font='entypo-fontello' title='Boka hyrbil' position='left' icon_style='' boxed='' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#f7f1e4' custom_font='#5fa5b7' custom_border='#f7f1e4' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='manually,https://www.hotelladdict.se/boka-hyrbil/' linktarget='' linkelement='both' id='' custom_class='' av_uid='av-k64vdwhm' admin_preview_bg=''][/av_icon_box][/av_one_fourth]"); } add_action('ava_after_main_container', 'enfold_after_main_container');or you can copy it here: https://pastebin.com/Mz3SVeMi
Best regards,
NikkoIn reply to: Icon boxes
Thanks Nikko, like this:
and how do add the rest of the code for the 3 other icon boxes?function enfold_after_main_container() {
echo do_shortcode(“[av_icon_box icon='ue821' font='entypo-fontello' title='Boka hotell' position='left' icon_style='' boxed='' font_color='' custom_title='' custom_content='' color='custom' custom_bg='#f7f1e4' custom_font='#5fa5b7' custom_border='#f7f1e4' custom_title_size='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' heading_tag='' heading_class='' link='manually,https://www.hotelladdict.se/boka-hotel/' linktarget='' linkelement='both' id='' custom_class='' av_uid='av-k64vcr3y' admin_preview_bg=''][/av_icon_box]“);
}
add_action(‘ava_after_main_container’, ‘enfold_after_main_container’);Best regards
CharlotteIn reply to: Formatting Between Product Addons and WooCommerce
Hi,
Thanks for the update. Please try this CSS as well:
.single-product bdi, .single-product bdi span { font-size: 20px; } .single-product .sku_wrapper { display: none; }Best regards,
RikardIn reply to: SUBHEADING TOW TYPES FORMAT
Thanks Victoria.
To summarize I explain better and give you the link.
I use two Special heading blocks.
1 – centralized
2 – aligns the left.
//
LINK – https://marcelomilk.com.br/mmilk/mamiferos/What I need is to customize the formatting of each text separately.
For block 1 I use this.
.av-special-heading-tag {
font-family: ‘PT Sans Narrow’, sans-serif! important;
font-size: 36px! important;
line-height: 1.1em;
text-transform: none! important;
text-align: left! important;
}
.av-subheading {
font-family: ‘Open Sans’, sans-serif! important;
font-size: 15px! important;
text-align: left! important;
font-weight: 600! important;
line-height: 1.7em;
color: # 000000;
}
//
But for block 2 I did it that way and it didn’t work.
.testsh .av-special-heading-tag {
font-family: ‘Lato’, sans-serif! important;
font-size: 36px! important;
line-height: 1.2em;
text-transform: none! important;
text-align: center! important;
color: #ffffff! important;
}
.sh3 .av-subheading {
font-family: ‘Open Sans’, sans-serif! important;
font-size: 15px! important;
text-align: center! important;
font-weight: 100! important;
line-height: 1.7em;
color: # 000000;
}In reply to: Increase the size of the icons in a button
Hi xuamox,
Please use the code like this:
.home #av_section_1 .avia-button .avia_button_icon { font-size: 42px; vertical-align: middle; }Best regards,
VictoriaIn reply to: Removing ENFOLD's formatting/styling on tables
Hi!
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.tableSpace table td { font-size: 16px; color: #444; }What other changes do you need?
If you need further assistance please let us know.
Cheers!
VictoriaIn reply to: Increase the size of the icons in a button
Hey xuamox,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
.home #av_section_1 .avia-button .avia_button_icon { font-size: 26px; }If you need further assistance please let us know.
Best regards,
VictoriaI would like to double the size of the fontello icons that I am using in four of my buttons, but I can’t seem to get it to work.
Any help would be appreciated.Topic: SUBHEADING TOW TYPES FORMAT
Hello, I have two .av-subheading formats, one in the center and the other aligned to the left.
For Special Heading I use these two types below:
1 – av-special-heading-tag (align center)
2 – .testsh .av-special-heading-tag (align left)And for subheading how do I configure the center?
.av-subheading {
font-size: 23px;
text alignment: left;
line height: 1.6em;
font family: ‘montserrat’;
color: # 747474;
}Hi Victoria
Here’s my CSS looks like now:
@media only screen and (max-width: 1024px) {
.responsive #top #header #header_main .inner-container #text-6.widget h1 {
color: #760008!important;
font-size: 28pt!important;
font-family: ‘Palace Script MT’!important;
margin-top: 0px!important;
margin-left: -15px!important;
}
.responsive #top #header #header_main .inner-container #text-6.widget h3 {
color: #760008!important;
font-size: 16pt!important;
font-family: ‘Palace Script MT’!important;
margin-left: -40px!important;
margin-top: -20px!important;
}#header.av_header_transparency #text-6 .textwidget h1, #header.av_header_transparency #text-6 .textwidget h3 {
color: #fff !important;
}#top #header #header_main .container.av-logo-container .inner-container {
display: block !important;
}
#top #header #header_main .container.av-logo-container {
margin-left: 0px !important;
}
}
@media only screen and (max-width: 767px) {
.responsive #top #header #header_main .inner-container #text-6.widget h1 {
color: #760008!important;
font-size: 20pt!important;
font-family: ‘Palace Script MT’!important;
margin-top: -100px!important;
margin-left: 150px!important;
}
.responsive #top #header #header_main .inner-container #text-6.widget h3 {
color: #760008!important;
font-size: 10pt!important;
font-family: ‘Palace Script MT’!important;
margin-left: 130px!important;
margin-top: -15px!important;
}#header.av_header_transparency #text-6 .textwidget h1, #header.av_header_transparency #text-6 .textwidget h3 {
color: #fff !important;
}#top #header #header_main .container.av-logo-container .inner-container {
display: block !important;
}
#top #header #header_main .container.av-logo-container {
margin-left: 0px !important;
}
}
@media only screen and (max-width: 480px) {
.responsive #top #header #header_main .inner-container #text-6.widget h1 {
color: #760008!important;
font-size: 14pt!important;
font-family: ‘Palace Script MT’!important;
margin-top: -90px!important;
margin-left: 140px!important;
}
.responsive #top #header #header_main .inner-container #text-6.widget h3 {
color: #760008!important;
font-size: 10pt!important;
font-family: ‘Palace Script MT’!important;
margin-left: 115px!important;
margin-top: -15px!important;
}#header.av_header_transparency #text-6 .textwidget h1, #header.av_header_transparency #text-6 .textwidget h3 {
color: #fff !important;
}#top #header #header_main .container.av-logo-container .inner-container {
display: block !important;
}
#top #header #header_main .container.av-logo-container {
margin-left: 0px !important;
}
}Lyse
In reply to: Align Logo with Phone number
Hi Monique,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (max-width: 767px) { .responsive .logo img { width: 58%; } #text-2 { top: -35px; } #text-2 p { font-size: 20px; } } @media only screen and (max-width: 479px) { #text-2 { display: none; } .responsive .logo img { width: 90%; } }If you need further assistance please let us know.
Best regards,
VictoriaHi Victoria,
OK so I’ve added the following CC within the @media for the text widget content (however is does not work):@media only screen and (max-width: 767px) {
.responsive #top #header #header_main .inner-container #text-6.widget h1 {
color: #760008!important;
font-size: 22pt!important;
font-family: ‘Palace Script MT’!important;
}
.responsive #top #header #header_main .inner-container #text-6.widget h3 {
color: #760008!important;
font-size: 12pt!important;
font-family: ‘Palace Script MT’!important;
text-indent: 2px!important;
margin-top: -25px!important;
}
.responsive #top #header #header_main .inner-container #text-6.widget img {
width: 10px!important;
height: 60px!important;
}
#header.av_header_transparency #text-6 .textwidget h1, #header.av_header_transparency #text-6 .textwidget h3 {
color: #fff !important;
}#top #header #header_main .container.av-logo-container .inner-container {
display: block !important;
}
#top #header #header_main .container.av-logo-container {
margin-left: 0px !important;
}
}Any help you can provide would be greatly appreciated.
Thanks
LyseHi team,
I’ve some issues with a “huge” topic for my header area, working with widgets.
I’ve a sketch how it should look like –> https://imgur.com/CAZUK4pThe big issue is, that the header worked fine without the images, but after I added them everything was broken. Currently I really don’t know how to call them and align them next to the text.
What was done by me so far?
1. I added the following code to functions.phpadd_action( 'ava_before_bottom_main_menu', 'enfold_customization_header_widget_area' ); function enfold_customization_header_widget_area() { dynamic_sidebar( 'header' ); dynamic_sidebar( 'header-two' ); dynamic_sidebar( 'header-three' ); dynamic_sidebar( 'header-four' ); }2. I created those 4 widgets (3 of them including a picture + text)
3. I customized them with some CSS in the file “custom.css”, as you can see below. (for different devices)/* Desktop Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the desktop view of your site */ @media only screen and (min-width: 2560px) { #header .widget:nth-child(3) { left: 40%; right: auto; padding-top: 2%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(4) { left: 60%; right: auto; padding-top: 2%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(5) { left: 80%; right: auto; padding-top: 2%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(6) { left: 35%; right: auto; padding-top: 4%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget p { line-height: 10px; font-size: 40px !important;; } #header .widget { position: absolute; } } @media only screen and (min-width: 1440px) { #header .widget:nth-child(3) { left: 25%; right: auto; padding-top: 2%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(4) { left: 50%; right: auto; padding-top: 2%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(5) { left: 75%; right: auto; padding-top: 2%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(6) { left: 25%; right: auto; padding-top: 5%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget p { line-height: 10px; font-size: 14px !important;; } #header .widget { position: absolute; } } @media only screen and (min-width: 1024px) and (max-width: 1439px) { #header .widget:nth-child(3) { left: 25%; right: auto; padding-top: 3%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(4) { left: 50%; right: auto; padding-top: 3%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(5) { left: 75%; right: auto; padding-top: 3%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(6) { left: 25%; right: auto; padding-top: 8%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget p { line-height: 10px; font-size: 12px !important;; } #header .widget { position: absolute; } } /* Tablet Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (min-width: 768px) and (max-width: 1023px) { #header .widget:nth-child(3) { left: 30%; right: auto; padding-top: 3%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(4) { left: 55%; right: auto; padding-top: 3%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(5) { left: 77%; right: auto; padding-top: 3%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget:nth-child(6) { left: 30%; right: auto; padding-top: 9%; position: absolute; top: -25%; transform: translate(-0%); z-index: 999999; } #header .widget p { line-height: 10px; font-size: 10px !important;; } #header .widget { position: absolute; } } /* Mobile Styles ================================================== */ /* Note: Add new css to the media query below that you want to only effect the Mobile and Tablet Portrait view */ @media only screen and (max-width: 767px) { /* Add your Mobile Styles here */ .widget { display: none !important; }4. At least I added each icon to the text widget it belongs to. So three of four items have 1 picture and 1 text item within one custom widget.
5. Now the header is totally broken :/Maybe you have some hint for me how to set everything as needed in the sketch picture.
Thank you and best regards,
ApflbutznHello enfold Support,
we are currently trying to disable the gallery of a lightbox on a specific page.
On the page, we have two lightboxes, the first opens when someone clicks “Express-Anfrage”, this is a custom lightbox we created ourselfs and works as intended.
The second lightbox opens, when you click the image below “Die perfekte Warenkorb-Optimierung”.
This lightbox has a gallery navigation and can switch between both lightboxes.
The content of those two lightboxes hav nothing to do with each other so it seems kinda weird if you can switch between them with the navigation.
Is there some way we can add the lightbox without being able two switch between the two lightboxes?This is how we add the second lightbox
[av_image src='https://www.econsor.de/wp-content/uploads/2020/10/2020-10-20-warenkorb.png' attachment='54817' attachment_size='full' copyright='always' caption='' styling='' align='left' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' hover='' appearance='' lazy_loading='disabled' link='lightbox' target='' title_attr='' alt_attr='' id='' custom_class='post-entry' av_element_hidden_in_editor='0' av_uid='av-kb7m38' admin_preview_bg=''][/av_image]Thanks in advance
GerryIn reply to: Align Logo with Phone number
Thanks Rikard.
One more question, how do I get the phone number to clear properly on mobile? I tried this code:
@media only screen and (max-width: 767px) {
.responsive .logo img {
max-width: 50%;
}But it change the look of the desktop main nav including the background color, font size, etc. Kind of strange. I guess it has something to do with functions code?
In reply to: Formatting Between Product Addons and WooCommerce
Hi,
Add this to increase size:
bdi{ font-size:20px!important; }I don’t see a sku underneath the button. Do you mean the categories.
Best regards,
Jordan ShannonIn reply to: Increase font size of magazine block main title only
Hey navindesigns,
Add this to quick css:
.av-magazine-hero.first h3 a{ font-size:20px!important; }Adjust the size to what you need.
Best regards,
Jordan ShannonHi,
On my site at the bottom, I have 3 blocks labelled DOMESTIC CRICKET, FEATURES, CATEGORY HERE.
How do I make ONLY the first title (under the big image) larger than the others? I used the following but it is affect all the titles in the block
.av-magazine .av-magazine-content-wrap .av-magazine-titleThanks
In reply to: Formatting Between Product Addons and WooCommerce
Perfect thank you so very much!
Ok 2 more things, and I think we are spot on.
Can I increase the font size of the price?
Can I hide the sku beneath the add to cart button
Thanks again!
In reply to: Phone number and social icons on mobile issues
Hello
I managed to fix the icon facing issue by downloading new font and using that code in the header/extra elements[av_font_icon icon='ue800' font='fontello' style=' ' caption='' link='' linktarget='' size='18px' position='left' color='#808080'][/av_font_icon] <span class=”custom-header-meta”>(630)……….</span> [av_font_icon icon='ue805' font='entypo-fontello' style='' caption='' link='' linktarget='' size='18px' position='center' color='#808080'][/av_font_icon] <span class=”custom-header-meta”>service@,,,,,,t.com</span>
Can somebody help me with mobile issues? Thank you
Topic: Enfold Mobile Menu styling
Hi,
I am trying to style the mobile menu but having some issuesa) I would like the hover area to be larger. Right now it’s a narrow strip on the list item. I tried playing around with margin and padding with no luck
b) The submenu item has way too much spacing compared to the top-level menu items
c) can’t get a bottom border to display between list items
d) how do I increase the size of the mobile menu top-level font, but not the sub-menu font size?Thanks,
Eric
In reply to: Socket styling on mobile
