Viewing 30 results - 1,441 through 1,470 (of 18,718 total)
  • Author
    Search Results
  • #1399616

    Hey Tanja,

    Thank you for the inquiry.

    Are you referring to the phone number in the third footer column? If yes, then you can use this css code to adjust the font size of the phone number.

    body#top .footer_color section#custom_html-2 a {
        font-size: 24px;
    }
    

    Please toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css modifications.

    Best regards,
    Ismael

    Hey William,

    Thank you for the inquiry.

    Since the featured post category or tag has been removed, the class name tag-featured-post is no longer applied. You have to adjust the css a bit.

    #top.home #wrap_all .main_color .post-entry h2.post-title {
        font-size:32px;
    }

    You may need to apply a custom css class name to the Blog Post element and adjust the css.

    Best regards,
    Ismael

    #1399588
    Sandy
    Participant

    I want the footer widget Navigation Menu text to be larger than the default font size.

    I changed the Theme Options / Advanced Styling / Widget Links to 16px font size. This made the footer widget Navigation Menu text larger as desired, but it also made the H4 phone text smaller than desired. I want the H4 phone text to remain H4 font size.

    How can this be achieved?

    #1399585
    es.design.ma
    Participant

    I’m using the fullwidth easy slider with one image and a caption. I have the caption size set to 40 point but when it converts to a mobile view, the font is so large it covers the entire image. Is there any coding I can add that would specify the font size to reduce when it’s viewed on a mobile device?

    #1399536
    billbasler
    Participant

    Kriesi:

    On a prior need, you helped me with a code snippet for my specific scenario. It worked perfectly until I found another, better (less manual control) way to automate this. See my page at: woodyboater.com

    On this page, I have used three blog post Advanced Page Builder elements—each set to do different things. The top post element was set to pull in ONLY the single post that was tagged as -featured post. After I got this working as it should, I wanted to style the headline on JUST this top blog post element, increasing the h2 post title size. This is the code snippet you gave me to do that:

    /* CSS – increase heading size on featured blog post on home page. */
    #top.home #wrap_all .main_color .post-entry.tag-featured-post h2.post-title {
    font-size:32px;

    Now…forward to today. I have found a different way to bring these post into this top element. Rather that using the tag method, ie: -featured post, I have simply filtered the blog post element as follows:
    Filter entries by time period
    Unit before: 1 Period before: Days

    My goal is to quite using the featured post tag—at least for this specific use case. But, when I do, I lose my styling of the increased heading size. Is there a new piece of code that you can provide that will do the same thing without the use of the featured post tag?

    Also, I should note, that I would like the solution to be specific to this one blog element. I have two other blog post elements on the page that I DONOT want affected.

    Thank you!

    Hi Tom,

    I added the following code to the bottom of Quick CSS field

    #top .tribe-events-content p, .tribe-events-content ol, .tribe-events-content p, .tribe-events-content ul, #top .tribe-common .tribe-common-b2 {
      color: #919191;
     font-size: 16px; 
    font-family: var(--tec-font-family-sans-serif);
    }

    This seems to fix the font size, color, and family issues. Please review your website and let me know if you still experience issues.

    Best regards,
    Yigit

    #1399104

    In reply to: Post Slider

    Hi markmade,

    Please try to add this CSS code as well:

    #top .avia-content-slider .slide-entry-excerpt .more-link:after {
        content: '\e88d';
        font-family: 'entypo-fontello';
        font-size: 18px;
        margin-left: 8px;
    }

    Best regards,
    Nikko

    #1398943

    there are no errors in his quick css – it is quiet small:

    h3.av-masonry-entry-title {
     color:#fff!important
    }
    top label.input_checkbox_label {
     font-size:16px!important
    }
    @media only screen and (max-width:767px) {
     #top label.input_checkbox_label {
      font-size:14px!important;
      padding-left:25px
     }
    }
    .pedigree-footer {
     display:none
    }
    .pedigree-name {
     text-transform:uppercase
    }
    main a {
     text-decoration:underline
    }
    #top div .av-light-form select option {
     color:#000
    }
    @media only screen and (min-width:768px) {
     .overlapping-columns {
      position:relative;
      height:auto !important
     }
     .overlapping-columns .flex_column.first {
      position:absolute;
      width:66% !important
     }
     .overlapping-columns .flex_column.first ~ .flex_column {
      position:relative;
      margin:0 !important;
      left:calc(66% - 8vw);
      width:calc(34% + 8vw);
      top:5vw !important;
      margin-bottom:10vw !important
     }
    }

    only: this rule should be ?

    #main a {
     text-decoration:underline
    }

    but the css snippet of Mike is still not present:

    .template-search .post-entry {
        clear: none;
    }

    did you enter css code to some other places ( custom.css etc. ) ?

    #1398872

    Hi,
    To change the menu arrows please see our documentation: Replace mega menu arrows with custom icon
    So for your situation, to have the bar icon and to have it the color red, please try this css:

    #top .avia-bullet {
      border: none;
        padding:0;
        margin: 0 5px 0 0!important;    
    }
    #top .avia-bullet:before {
        content: "\e819";
        font-family: 'entypo-fontello'; 
        color: red;
        font-size:11px;
        line-height:1em;
        left:-3px;
    }

    This will change the above solution to have specific bars a different color to this css:

    .header_color #menu-item-331 > a > .avia-bullet:before {
        color: blue;
    }
    .header_color #menu-item-388 > a > .avia-bullet:before {
        color: green;
    }
    .header_color #menu-item-332 > a > .avia-bullet:before {
        color: yellow;
    }

    The expected results:
    Enfold_Support_436.jpeg

    Best regards,
    Mike

    #1398856

    Hi,

    Please try this CSS instead:

    #top .av-subnav-menu li a {
        font-size: 16px !important;
    }

    Best regards,
    Rikard

    #1398843
    envato99
    Participant

    Hi team,

    Some text elements on our website are misaligned vertically in FireFox.

    I posted about this error before and hoped it woud be fixed in FireFox V 110.0.

    However, the alignment error persists: the text element should be aligned with the top of the image of the monitor [See screencap].

    No problem in other browsers.

    Thanks for you assistance,

    Stephen.

    ====

    CUSTOM CSS:

    /*
    .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;
    }

    #1398818

    Hi Nikko. It didn’t change the font size at all. Any other suggestions?

    Hi Tom,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    .main_color #submit, .main_color input[type='submit'] {
        background-color: #499F99;
        padding: 16px 20px;
        font-size: 15px;
        border-radius: 2px;
    }

    Best regards,
    Nikko

    #1398712

    Hi iosefo,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    #top #header #avia2-menu li {
        font-size: 14px;
    }

    Just adjust the font size value as you see fit.
    Hope it helps.

    Best regards,
    Nikko

    #1398702

    Hi martinvanderharst,

    Please try to add this CSS code in Enfold > General Styling > Quick CSS:

    #top .av-masonry-sort a {
        border-radius: 20px;
        padding: 9px 10px 7px;
        font-size: 13px;
        margin: 3px 4px;
        line-height: 1.2em;
        position: relative;
        font-weight: normal;
        text-align: center;
        color: white;
        background-color: #b22979;
    }
    
    #top .av-masonry-sort .text-sep {
        display: none;
    }
    
    #top .av-masonry-sort a:hover, 
    #top .av-masonry-sort a.active_sort {
        background-color: #00a6d9;
    }

    Hope it helps.

    Best regards,
    Nikko

    #1398697
    iosefo
    Participant

    How can I change the font size for a secondary menu?

    #1398571

    Hi,
    Oops, I adjusted to this:

    #avia2-menu #menu-item-599 a:before {
    	content: "\e800";
    	font-family: fontello;
    	font-size: 16px;
    	color: #000;
    }
    #avia2-menu #menu-item-599 a{
    	font-size: 0;
    }
    #avia2-menu #menu-item-673 a:before {
    	content: "\e835";
    	font-family: fontello;
    	font-size: 16px;
    	color: #000;
    }
    #avia2-menu #menu-item-673 a{
    	font-size: 0;
    }

    Please clear your browser cache and check.

    Best regards,
    Mike

    #1398566

    Hi,
    Thank you, I see this menu:
    Enfold_Support_426.jpeg
    and these custom icons:
    Enfold_Support_428.jpeg
    If you use this css:

    #avia2-menu #menu-item-599:before {
    	content: "\e800";
    	font-family: fontello;
    	font-size: 16px;
    	color: #000;
    }
    #avia2-menu #menu-item-599{
    	font-size: 0;
    }
    #avia2-menu #menu-item-673:before {
    	content: "\e835";
    	font-family: fontello;
    	font-size: 16px;
    	color: #000;
    }
    #avia2-menu #menu-item-673{
    	font-size: 0;
    }

    you should see this result:
    Enfold_Support_430.jpeg
    After applying the css, please clear your browser cache and check.
    Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

    Best regards,
    Mike

    #1398537

    Hi,
    Thanks for the login, I corrected the curly quotes so the font for the mobile menu and blog category is correct now.
    I also found that you had an unclosed media query in your quick css breaking the mobile font size.
    I saw the issue with the h4 “Unsere Podencos” on the homepage, since this is corrected I assume the others are also, please clear your browser cache and check.
    I will close this thread, if you still have issues please respond to the other thread, thank you for using Enfold.

    Best regards,
    Mike

    Hi,
    Thanks for the login, I corrected the curly quotes so the font for the mobile menu and blog category is correct now.
    I also found that you had an unclosed media query in your quick css breaking the mobile font size.
    I saw the issue with the h4 “Unsere Podencos” on the homepage, since this is corrected I assume the others are also, please clear your browser cache and check.
    I will close this thread, if you still have issues please respond to the other thread, thank you for using Enfold.

    Best regards,
    Mike

    #1398535

    Hi,
    Thanks for the login, I corrected the curly quotes so the font for the mobile menu and blog category is correct now.
    I also found that you had an unclosed media query in your quick css breaking the mobile font size.
    I saw the issue with the h4 “Unsere Podencos” on the homepage, since this is corrected I assume the others are also, please clear your browser cache and check.

    Best regards,
    Mike

    #1398449
    tom_on_wheels
    Participant

    Hi,

    I don’t find a way to change the displayed font of blog category in the blog excerpt.

    It now looks like this

    Blog post excerpt

    After putting this into CSS

    .blog-categories a, span.blog-author a, time.date-container, span.blog-author, h5.av-share-link-description {
    font-family: ‘Ubuntu Condensed’, sans-serif;
    color: #4e4e4e;
    }

    it looks like this

    Blog post category

    So the category line “WIE WIR ZU UNSEREN HUNDEN KAMEN” has been affected, but it is not Ubuntu Condensed. Similar problem like

  • https://kriesi.at/support/topic/font-and-font-size-in-mobile-menu/
  • ?

    Is there a solution?

    Thanks in advance
    Tom

#1398448
tom_on_wheels
Participant

Hi,

I try to change the font and font size in the mobile menu by this css:

@media only screen and (max-width: 767px){
#top #wrap_all .av-burger-overlay .av-burger-overlay-scroll #av-burger-menu-ul li a {
font-family: ‘Ubuntu Condensed’, sans-serif;
color: #919191 !important;
padding-top:10px;
line-height:10px;
}

But the result is not Ubuntu Condensed which is of course downloaded and used in headers and body.

Mobile menu

Is there any solution?

Thanks in advance
Tom

#1398436

In reply to: Tab Section Mobile

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:
Enfold_Support_391.jpeg
expected results tablet:
Enfold_Support_393.jpeg
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:
Enfold_Support_395.jpeg

Best regards,
Mike

#1398421

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

#1398354
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?

#1398348

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

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

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

#1398162

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

Viewing 30 results - 1,441 through 1,470 (of 18,718 total)