Page 50 – Support | Kriesi.at – Premium WordPress Themes

Hi,
Thank you for your patience to move the arrows from the edge equally please try this css:

@media only screen and (max-width: 1024px) { 
#main .av-tab-above-content .av-tabsection-arrow {
    position: absolute;
    width: 90%;
    top: 30px;
    left: 5%;
}
}

expected results mobile:

expected results tablet:

To also change the color and size try adding this css:

@media only screen and (max-width: 1024px) { 
#main .av-tab-above-content .av-tabsection-arrow {
    position: absolute;
    width: 90%;
    top: 30px;
    left: 5%;
}
#main .avia-slideshow-arrows a:before {
	color: #bfdc1e;
	font-size: 20px;
    font-weight: 900;
}
}

for this result:

Best regards,
Mike

February 18, 2023 at 12:05 pm #1398421

In reply to: Change only mobile menu font size

Rikard

Hey enfold,

There’s nothing in that CSS which would effect images and container width. Did you try closing the media query properly?

@media only screen and (max-width:767px) {
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
  font-size: 18px;
  text-transform: uppercase;
}
}

Best regards,
Rikard

February 17, 2023 at 2:54 pm #1398354

Topic: Change only mobile menu font size

in forum Enfold

enfold

Participant

Hi guys,
I found on the forum, this css code to change font mobile style:

@media only screen and (max-width:767px) {
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
font-size: 18px;
text-transform: uppercase;
}

Initially works ok on mobile, but in desktop it changes hover images site styles and modify width container.
I need the code to modify just menu mobile font style.

Can you help me with this please?

February 17, 2023 at 2:35 pm #1398348

In reply to: Can you make text into hot spots

Yigit

Hey,

Out of the box that is not possible.

As a workaround, please edit your Hotspot element and give it a custom CSS class (“custom-hotspot” in example below) in Advanced > Developer Settings, add following code to bottom of Quick CSS field in Enfold theme options > General Styling and adjust it as needed


#top .custom-hotspot .av-image-hotspot a {
  color: transparent;
  background-color: transparent;
}
#top .custom-hotspot .av-image-hotspot-1 a::after {
  color: #000;
  content: 'STILLS';
  font-size: 40px;
}
#top .custom-hotspot .av-image-hotspot-2 a::after {
  color: #000;
  content: 'ABOUT';
  font-size: 40px;
}
#top .custom-hotspot .av-image-hotspot-pulse { 
  display: none;
}

Best regards,
Yigit

February 17, 2023 at 2:25 pm #1398347

In reply to: custum icon magnifying glass at image overlay lightbox looks compressed

annevoelkel

Participant

Dear Kriesis,
problem is solved! By default the icon is italic. So I changed the font-style to normal:
image-overlay.overlay-type-image .image-overlay-inside::before {
content: “\E803”; /* magnifiing glass */
font-family: ‘entypo-fontello’;
font-size: 3em; /* enlarged */
font-weight: normal;
font-style: normal; /* changed */
}

You can close the thread.
Best regards
Anne

February 16, 2023 at 5:49 pm #1398239

Topic: custum icon magnifying glass at image overlay lightbox looks compressed

in forum Enfold

annevoelkel

Participant

Dear Kriesis,
I replaced the expand icon at the image overlay with the entypo magnifying glass. It works so far but the icon is compressed and looks weired (please see link attached):
.image-overlay.overlay-type-image .image-overlay-inside::before {
content: “\E803”; /* magnifiing glass */
font-family: ‘entypo-fontello’;
font-size: 5em; /* enlarged */
font-weight: normal;
}
What is wrong?
Best regards
Anne

February 16, 2023 at 5:36 am #1398162

In reply to: Full Width Easy Slider Video Issue

Nikko

Inactive Moderator

Hi THP Studio,

I have added this CSS code and it adds the button on the mobile:

@media only screen and (max-width:767px) {
    #top .avia-slide-wrap a.mfp-iframe:before {
        content: '';
        background: rgba(238,48,35,.7);
        border-radius: 15px;
        display: block;
        margin: -50px 0 0 -75px;
        transform: scale(0.5);
        width: 150px;
        height: 100px;
        position: absolute;
        top: 50%;
       left: 50%;
       z-index: 50;
  }

    #top .avia-slide-wrap a.mfp-iframe:after {
        content: '\E897';
        font-family: 'entypo-fontello';
        font-size: 1.8em;
        top: 50%;
        left: 50%;
        position: absolute;
        z-index: 60;
        color: #fff;
        transform: translate(-50%, -50%);
    }
}

As for “More videos”, I don’t seem to see the issue on my end.
Also on your site, I don’t see related videos when the video is paused, did you remove it?

Best regards,
Nikko

February 13, 2023 at 7:11 pm #1397805

In reply to: Snap Scroll does not work

Hi,
Glad to hear this helped, for mobile it looks like you are overriding the 100vh with 100%!important:

@media only screen and (max-width: 480px){
.av-layout-grid-container {
    height: 100% !important;
}
}

I recommend using 100vh;
and for the inner container you are adding: height: auto !important;

media only screen and (max-width: 767px){
.responsive #top #wrap_all .av-flex-cells .no_margin {
    display: block;
    margin: 0;
    height: auto !important;
    overflow: hidden;
    float: left;
    clear: none;
    width: 100%;
}
}

I recommend setting the height to 50vh like this:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #main .av-flex-cells .no_margin {
    height: 50vh !important;
}
}

and changing the top padding for mobile to 20px from the current 70px, this looks like the text will then fully show, you could also tweak the font size a little or change the image height a little to allow more room for the text.

Best regards,
Mike

February 13, 2023 at 8:01 am #1397711

Topic: link in table

in forum Enfold

schweg33

Participant

Hello together
I have created a homepage here
link of the page below:

There is a table
there it has links and text
with this code I want to change the colour of the link and the text
colour text the link works white like the link below it
I want the link in the table to have the same colour as the text

the link below must stay white
here is my code:
/*format Tabelle*/
.avia-table tr th, .avia-table tr td {
text-decoration: none !important;
font-size: 15px !important;
color: red !important;
}

is the possible
thanks in advance
kind regards
Franz

February 11, 2023 at 9:18 pm #1397592

In reply to: SubLevel Menu Advanced Styling not being Applied

Hey volpagirl,
Thank you for the link to your site, please try this css:

.header_color .main_menu ul ul,
.header_color .main_menu .menu ul li a span,
.header_color .main_menu .menu ul li a:hover {
	background-color: #930c15;
	font-size: 16px;
	font-weight: 600;
}

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

Best regards,
Mike

February 10, 2023 at 6:01 pm #1397491

Topic: Menu font size

in forum Enfold

koboldox

Participant

I know this might be a question which has been answered before several times but my search didnt get any results.
How can I change the font size of my main menu items? I need the right CSS
thanks

February 9, 2023 at 7:40 pm #1397351

In reply to: Classic demo and my content – Child theme

Rikard

Hi,

You can change the main font size under Enfold->General Styling->Typography. Sub level links can be set under Enfold->Advanced Styling.

You can add a link like this in the copyright field:

<a href="https://link.to/site">Link text</a>

Best regards,
Rikard

February 9, 2023 at 7:22 pm #1397345

In reply to: Menu "falsch" dargestellt

Rikard

Hi,

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

@media only screen and (max-width: 990px) {
#av-burger-menu-ul li {
    font-size: 24px;
}
}

Best regards,
Rikard

February 9, 2023 at 3:27 pm #1397320

In reply to: Classic demo and my content – Child theme

rackdc

Participant

-How do I increase the general font size? My client keeps saying they want the text to be larger. Main body of text and sub menu items.

-I’ve managed to change this info on the bottom bar but how do I create a link in this area?
© Copyright – Enfold Theme Demo – Enfold Theme by Kriesi

Hope you can help.

February 8, 2023 at 12:30 pm #1397156

In reply to: How to change the default font?

Yigit

Hi Lene,

Please go to Enfold theme options > General Styling > Typography and adjust “Default Content Font Size” as needed.

Best regards,
Yigit

February 8, 2023 at 11:00 am #1397131

Topic: different font-size in mobile browser

in forum Enfold

solf

Participant

We have very different representations of fonts and headings in different mobile browsers. Sometimes graphics are not displayed. How can we solve this problem?

===
Wir haben sehr unterschiedliche Darstellungen von schriften und Überschriften in den verschiedenen mobilen Browsern. Teilweise werden auch Grafiken nicht angezeigt. Wie können wir das Problem lösen?

Thanks, solf

February 8, 2023 at 8:56 am #1397103

In reply to: How to change the default font?

Sachs

Participant

This reply has been marked as private.

February 8, 2023 at 4:32 am #1397072

In reply to: Multiple Blog Page Elements on a single page. How to edit H2 Heading

Hey William,
Thanks for your question, please try this css:

#top.home  #wrap_all .main_color .post-entry.tag-featured-post h2.post-title {
	font-size:32px;
}
#top.home  #wrap_all .post-entry.bloglist-simple .blog-categories a {
	font-size:13px;
}

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

Best regards,
Mike

February 8, 2023 at 4:06 am #1397062

In reply to: Font Awesome Icon Before Accordion Title

Hey CopperCityCreative,
Thanks for the link to your site, I see that you have already installed the Font Awesome font, so to add a Font Awesome icon to before the accordion title you first need to find the unicode for the icons you wish to use, for example f09d is a credit card and f3d1 is cash.

Then add the unicode to css like this:

.togglecontainer p[data-fake-id="#toggle-id-1"]:before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f09d";
  font-size: 40px;
  padding-right: 12px;
}
.togglecontainer p[data-fake-id="#toggle-id-1"] {
	display: flex;
}
.togglecontainer p[data-fake-id="#toggle-id-2"]:before {
  font-family: "Font Awesome 5 Free"; 
  content: "\f3d1";
  font-size: 40px;
  padding-right: 12px;
}
.togglecontainer p[data-fake-id="#toggle-id-2"] {
	display: flex;
}

This is the result:

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

Best regards,
Mike

February 7, 2023 at 3:42 pm #1396989

Topic: Can’t get this font to show up in the light version

in forum Enfold

daineax

Participant

Hi there, I cannot get this font, Fraunces, to show up in the Thin 100 weight.
https://fonts.google.com/specimen/Fraunces

I would like it to show up in my H2, looking like Fraunces-Thin-100.

Under Quick CSS I have pasted:

h2 {
font-family: ‘Fraunces’, serif !important;
font-weight: 100 !important;
font-size: 38px;
text-transform: none !important;
}

——-
The font family, font size, all work well with that CSS code, but not the font weight, trying to get it to be Thin 100.

Would you have any ideas? Thank you!

February 6, 2023 at 4:27 pm #1396855

Topic: Vertical alignment problem / text element / only in FireFox

in forum Enfold

envato99

Participant

Hi Team,

Looking at my website in Firefox today, I noticed that some text elements are not aligning properly. [See linked page below for example.]

These text elements render correctly in Edge & Chrome.

My custom CSS is below:

Thanks for you assistance,

Stephen.

====
/*
.responsive .container {
max-width: 100%;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
*/

.clientlogo {
text-align: center;
}

.clientlogogallery {
max-height: 100px;
}

#top .mfp-image-holder .mfp-content {
max-width: 90vw;
}

body#top {
font-size: 125%;
}

*/
.avia-image-container .avia-image-container-inner {
top: -60px;
padding-top: 0px;
padding-bottom: 0px;
}

.responsive .container {
max-width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
*/

#top.blog .post-entry .blog-meta .small-preview .iconfont:before {
display: none;
}

#top.blog .post-entry .blog-meta {
display: none;
}

#main a {
text-decoration: underline;
}

====

February 5, 2023 at 8:40 pm #1396787

In reply to: show the pictures smaller

Hi,
I see you have a custom font size set in your css with !important; it would be best if you change this:

@media only screen and (max-width: 767px)
h3 {
    font-size: 23px !important;
}

If you can’t try this css:

@media only screen and (max-width: 767px) {
#vorstand h3.team-member-name {
    font-size: 12px !important;
}
}

To reduce the top margin of the second row on desktop try this css:

@media only screen and (min-width: 768px) {
#top #wrap_all #vorstand .flex_column.av_one_fourth.column-top-margin {
    margin-top: 25px;
}
}

adjust the number to suit.

Best regards,
Mike

February 3, 2023 at 7:58 pm #1396580

In reply to: Add dotted navigation to testimonial block

Hi,
I see that you have this custom css:

@media only screen and (max-width: 767px){
.myslider {
    margin-left: -40px;
    margin-right: -25px;
    margin-top: 25px;
    margin-bottom: 0.5px;
}
}

To center the items please change it to this:

@media only screen and (max-width: 767px){
.myslider {
    margin-top: 25px;
    margin-bottom: 0.5px;
}
}

and then add this css:

@media only screen and (max-width: 767px) { 
.responsive #top #team .av-large-testimonial-slider.avia-testimonial-wrapper .avia-testimonial {
    padding: 0;
    font-size: 0.85em;
    display: flex;
    justify-content: center;
}
}

Then to show the arrows remove your custom css:

.avia-slideshow-arrows.avia-slideshow-controls {
    opacity: 0;
}
.avia-slideshow-arrows {
    display: none !important;
}

Then add this css:

#top #team .avia-slider-testimonials.av-slideshow-ui .avia-slideshow-arrows a {
    opacity: 1;
}

Please see the screenshot in the Private Content area of my test results.

Best regards,
Mike

February 1, 2023 at 11:29 am #1396190

Topic: Responsive text Size not working

in forum Enfold

Oceans247

Participant

Hi there,

I have specified the font size for H1 headings in the theme options. However, I want to display a reduced-size font on smaller mobile devices.

So have gone to the text block settings, Styling, Font Size and set a reduced size text for the 2 smallest device sizes. However the settings do not pull through. The text is not reduced on smaller screens. How do I fix this?

February 1, 2023 at 10:56 am #1396183

Topic: Delay in visualizing image positioned absolute over Fullscreen Slider

in forum Enfold

elenapoliti

Participant

Hi I am working on a home page and I need to set a Fullscreen slider with one single picture. Over that I want to show a graphic image (I have it in png and svg), over which a special header appears. Both these elements have been placed using the position absolute and adjusting top/right values.

However when I load the page in front-end I can see the graphic image and text appearing for a millisecond. Then they disappear and appear again when I start scrolling the page. I checked if there was some further advanced rule applied to the elements but there not. How can I keep them visible since the beginning of the loading page?

Here’s my debug code

[av_fullscreen size='2048x2048' control_layout='av-control-default' slider_navigation='av-navigate-arrows av-navigate-dots' nav_visibility_desktop='' nav_arrow_color='' nav_arrow_bg_color='' nav_dots_color='' nav_dot_active_color='' image_attachment='' animation='slide_up' transition_speed='' autoplay='false' interval='5' conditional_play='' img_scrset='' lazy_loading='disabled' id='' custom_class='home-open-img' template_class='' av_uid='av-ldk05icf' sc_version='1.0']
[av_fullscreen_slide slide_type='image' id='116' position='center center' video='https://' mobile_image='' fallback_link='https://' title='' video_cover='' caption_pos='caption_right' custom_title_size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='' custom_content_size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='' font_color='' custom_title='' custom_content='' heading_tag='' heading_class='' link_apply='' link='lightbox' link_target='' button_label='Click me' button_color='light' link1='manually,http://' link_target1='' button_label2='Click me' button_color2='light' link2='manually,http://' link_target2='' overlay_opacity='0.5' overlay_color='' overlay_pattern='' overlay_custom_pattern='' av_uid='av-uv4f' sc_version='1.0' video_autoplay='' video_controls='' video_mute='' video_loop='' overlay_enable=''][/av_fullscreen_slide]
[/av_fullscreen]

[av_image src='http://localhost:8888/rialto1082.com/wp-content/uploads/2023/01/bridge-graphic.png' attachment='97' attachment_size='full' copyright='' caption='' image_size='no scaling' styling='' box_shadow='none' box_shadow_width='10' box_shadow_color='' align='center' font_size='' overlay_opacity='0.4' overlay_color='#000000' overlay_text_color='#ffffff' animation='no-animation' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='none' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='none' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='none' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='none' av-mini-parallax_parallax_speed='' hover='' blur_image='' grayscale_image='' fade_image='' appearance='' css_position='' css_position_location=',-50%,150%,' css_position_z_index='10' av-desktop-css_position='absolute' av-desktop-css_position_location=',-50%,260%,' av-desktop-css_position_z_index='10' av-medium-css_position='absolute' av-medium-css_position_location=',-30%,260%,' av-medium-css_position_z_index='10' av-small-css_position='absolute' av-small-css_position_location=',-30%,260%,' av-small-css_position_z_index='10' av-mini-css_position='absolute' av-mini-css_position_location=',-30%,260%,' av-mini-css_position_z_index='10' transform_perspective='' transform_rotation=',,,' transform_scale='1.5,1.5,1.5' transform_skew=',' transform_translate=',,' av-desktop-transform_perspective='' av-desktop-transform_rotation=',,,' av-desktop-transform_scale=',,' av-desktop-transform_skew=',' av-desktop-transform_translate=',,' av-medium-transform_perspective='' av-medium-transform_rotation=',,,' av-medium-transform_scale=',,' av-medium-transform_skew=',' av-medium-transform_translate=',,' av-small-transform_perspective='' av-small-transform_rotation=',,,' av-small-transform_scale=',,' av-small-transform_skew=',' av-small-transform_translate=',,' av-mini-transform_perspective='' av-mini-transform_rotation=',,,' av-mini-transform_scale=',,' av-mini-transform_skew=',' av-mini-transform_translate=',,' mask_overlay='' mask_overlay_shape='blob' mask_overlay_size='contain' mask_overlay_scale='100%' mask_overlay_position='center center' mask_overlay_repeat='no-repeat' mask_overlay_rotate='' mask_overlay_rad_shape='circle' mask_overlay_rad_position='center center' mask_overlay_opacity1='0' mask_overlay_opacity2='1' mask_overlay_opacity3='' link='' target='' title_attr='graphic-motif' alt_attr='graphic motif' img_scrset='' lazy_loading='disabled' av-desktop-hide='aviaTBav-desktop-hide' av-medium-hide='aviaTBav-medium-hide' av-small-hide='aviaTBav-small-hide' av-mini-hide='aviaTBav-mini-hide' id='' custom_class='' template_class='' av_element_hidden_in_editor='0' av_uid='av-ldk1oq0a' sc_version='1.0' admin_preview_bg=''][/av_image]

[av_one_full first min_height='' vertical_alignment='av-align-top' space='' row_boxshadow_width='10' row_boxshadow_color='' margin='0px' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' mobile_breaking='' mobile_column_order='' border='' border_style='solid' border_color='' radius='' radius_sync='true' min_col_height='' padding='' padding_sync='true' av-desktop-padding='' av-desktop-padding_sync='true' av-medium-padding='' av-medium-padding_sync='true' av-small-padding='' av-small-padding_sync='true' av-mini-padding='' av-mini-padding_sync='true' svg_div_top='' svg_div_top_color='#333333' svg_div_top_width='100' svg_div_top_height='50' svg_div_top_max_height='none' svg_div_top_opacity='' svg_div_bottom='' svg_div_bottom_color='#333333' svg_div_bottom_width='100' svg_div_bottom_height='50' svg_div_bottom_max_height='none' svg_div_bottom_opacity='' column_boxshadow_width='10' column_boxshadow_color='' background='bg_color' background_color='' background_gradient_direction='vertical' background_gradient_color1='#000000' background_gradient_color2='#ffffff' background_gradient_color3='' src='' attachment='' attachment_size='' background_position='top left' background_repeat='no-repeat' highlight_size='1.1' animation='' animation_duration='' animation_custom_bg_color='' animation_z_index_curtain='100' parallax_parallax='' parallax_parallax_speed='' av-desktop-parallax_parallax='' av-desktop-parallax_parallax_speed='' av-medium-parallax_parallax='' av-medium-parallax_parallax_speed='' av-small-parallax_parallax='' av-small-parallax_parallax_speed='' av-mini-parallax_parallax='' av-mini-parallax_parallax_speed='' css_position='' css_position_location=',-30%,150%,' css_position_z_index='' av-desktop-css_position='absolute' av-desktop-css_position_location=',-40%,320%,' av-desktop-css_position_z_index='15' av-medium-css_position='absolute' av-medium-css_position_location=',-30%,320%,' av-medium-css_position_z_index='15' av-small-css_position='absolute' av-small-css_position_location=',-30%,320%,' av-small-css_position_z_index='15' av-mini-css_position='absolute' av-mini-css_position_location=',-20%,320%,' av-mini-css_position_z_index='15' link='' linktarget='' link_hover='' title_attr='' alt_attr='' mobile_display='' mobile_col_pos='0' id='' custom_class='' template_class='' aria_label='' av_uid='av-12txf' sc_version='1.0']
[av_heading heading='Rialto 1082<br/>Venice Bed & Breakfast' tag='h1' style='blockquote modern-quote modern-centered' subheading_active='subheading_below' show_icon='' icon='ue800' font='entypo-fontello' size='' av-desktop-font-size-title='' av-medium-font-size-title='' av-small-font-size-title='' av-mini-font-size-title='26' subheading_size='' av-desktop-font-size='' av-medium-font-size='' av-small-font-size='' av-mini-font-size='16' icon_size='' av-desktop-font-size-1='' av-medium-font-size-1='' av-small-font-size-1='' av-mini-font-size-1='' color='custom-color-heading' custom_font='#ffffff' subheading_color='#ffffff' seperator_color='' icon_color='' margin='' margin_sync='true' av-desktop-margin='' av-desktop-margin_sync='true' av-medium-margin='' av-medium-margin_sync='true' av-small-margin='' av-small-margin_sync='true' av-mini-margin='' av-mini-margin_sync='true' headline_padding='' headline_padding_sync='true' av-desktop-headline_padding='' av-desktop-headline_padding_sync='true' av-medium-headline_padding='' av-medium-headline_padding_sync='true' av-small-headline_padding='' av-small-headline_padding_sync='true' av-mini-headline_padding='' av-mini-headline_padding_sync='true' padding='10' av-desktop-padding='' av-medium-padding='' av-small-padding='' av-mini-padding='' icon_padding='10' av-desktop-icon_padding='' av-medium-icon_padding='' av-small-icon_padding='' av-mini-icon_padding='' link='' link_target='' id='' custom_class='' template_class='' av_uid='av-ldk1eds5' sc_version='1.0' admin_preview_bg=''][/av_heading]
[/av_one_full]

February 1, 2023 at 9:55 am #1396169

In reply to: The logo is cut out

Ismael

Hey maryenvato,

Thank you for the inquiry.

Have you tried decreasing the font size of the main menu items? The style of the main menu can be adjusted in the Enfold > Advanced Styling panel. You can also adjust the Maximum Container Width value in the Enfold > General Layout > Dimensions panel.

Best regards,
Ismael

February 1, 2023 at 3:53 am #1396120

In reply to: Fullwidth Easy Slider Text on homepage via mobile

Nikko

Inactive Moderator

Hi carlosTLM98,

Please edit the Fullwidth Easy Slider, then edit the slide item, go to Styling > Font Sizes > edit Caption Title Font Size and Caption Content Font Size (make sure that the mobile device icon on the top of it is selected).
Hope this helps.

Best regards,
Nikko

January 31, 2023 at 7:13 pm #1396092

In reply to: Custom Icon Bullets