Hi,
For the background color #2C353D, I choose it in the color section background settings.
For the font color I updated the above css:

#color-footer a,#color-footer p,#color-footer strong.news-headline {
font-size: 12px;
color: #fff;
}

For the headlines I added:

#color-footer h3.widgettitle {
font-weight: normal !important; 
}

To add some padding to the “links” widget I added a ID and this quick css:

#color-footer .color-links {
padding-left: 70px;
}

Please adjust to suit.

Best regards,
Mike

Hey Lara,
When I compare your color section and footer I see the font is correct, and I assume you don’t want the same colors as the background of the color section would make white text hard to read, so I believe you want the font-size to match. So I added a ID to the color section, and this to your quick css:

#color-footer a,#color-footer p {font-size: 12px;}

For the icons I added this code:

#color-footer #text-7 .avia-icon-pos-left {
    margin-right: 20px; 
}

Please clear your browser cache and check.

Best regards,
Mike

Hey Felix-A,
Please try using the Enfold Theme Options > Extended styling
I changed your main menu font size to 18px, and font to “Droid Sans” and once I cleared my browser cache I could see the change.
Please clear your browser cache and check.

Best regards,
Mike

Hi,

1- Please use following code instead

#top #wrap_all .av-masonry-entry .av-masonry-entry-title {
    font-size: 20px;
}

2- Please go to Enfold theme options > Header > Transparency Options and adjust transparent header menu colors :)

Best regards,
Yigit

Hey Lisbeth,

Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

#top .av-caption-style-overlay .av-masonry-entry .av-masonry-entry-title {
    font-size: 20px;
}

If that does not help, please post a link to your page so we can make sure to provide you an accurate code :)

Best regards,
Yigit

Hey patricknh,
I recommended adding a custom class to your icons, so only to effect the ones you wish, by going to Enfold Theme Options > Layout Builder > Show element options for developers
Then add your custom class to this code:

.avia-icon-list .iconlist_icon {
    height: 64px !important; 
    width: 64px !important; 
    line-height: 64px !important; 
    font-size: 30px;

Note this is the standard size for the big icon list, adjust to suit.

Best regards,
Mike

Hi,

You can try this CSS:

#menu-item-263204 .avia-menu-text::after {
content: "4";
    font-size: 9px;
    color: #FFF;
    background: #42A0BD;
    line-height: 17px;
    width: 17px;
    display: inline-block;
    text-align: center;
    border-radius: 100px;
    position: relative;
    top: -9px;
    left: 2px;
}

Just replace the menu item ID in the code with your own menu item ID.

Best regards,
Rikard

Hi,
For the social icons and socket font size I added this:

@media only screen and (max-width: 1080px) { 
#socket .social_bookmarks li a {
width: 50px!important; 
line-height: 50px!important; 
min-height: 50px!important; 
font-size: 30px;
}

#socket .social_bookmarks li {
height: 50px!important; 
width: 50px!important; 
}

#socket .social_bookmarks {
    height: 60px!important;
}

#socket .copyright img {
    margin-top: 15px!important; 
}

#socket .container {
    width: 100%!important; 
    max-width: 100% !important;
}
}
@media only screen and (max-width: 422px) { 
#socket {
    font-size: 18px !important; 
}
}
@media only screen and (min-width: 423px) and (max-width: 828px) { 
#socket {
    font-size: 21px !important; 
}
}

For the two mobile font sizes, I made them as large as possible and still keep the socket links in line, if you find the links brake into two lines, just take the font size down one or two px.

For the mobile menu color, I added this:

.html_av-overlay-side #top #wrap_all .av-burger-overlay-scroll #av-burger-menu-ul a {
    color: #000 !important; 
}
#top .av-hamburger-inner, #top .av-hamburger-inner:before, #top .av-hamburger-inner:after {
    background-color: #000 !important; 
}

Please adjust to suit.

Best regards,
Mike

Hi,
Sorry about disabling the wordfence plugin, it was making it hard to remove the css from your child theme stylesheet, I forgot to turn it back on.
As for the Quick CSS, it looks like there was a couple of errors in the code that slipped by me, I checked again and it should be fine now.
Perhaps instead of using the Quick CSS box, you could move the css to WordPress > Customize > Additional CSS:

as it has a nice automatic error checking feature and you can see your css changes in real time.
I adjusted the font size for the socket, I saw you tried for 25px, but at smaller screens it would be a issue, so I used a media query to only target medium to large screens.

Best regards,
Mike

Hi,

Thanks for the update. Yes, you can use the text block element. Add this css code if you want to modify the caption further.

.av-image-caption-overlay-center {
    display: table-cell;
    vertical-align: top;
    font-size: 1.3em;
    line-height: 1.5em;
    padding: 7px 0 0 0;
}

Best regards,
Ismael

Hi,

How did you add your own search icon? Please try this css code to move the search shortcode to the left of the map pin icon and increase its size.

#header_meta .sub_menu li {
    float: right;
}

#top .menu-item-search-dropdown > a, #searchform #searchsubmit, .ajax_search_image, .iconfont {
    font-size: 30px;
}

Best regards,
Ismael

Hey patricknh,
To add a email icon, go to Enfold Theme Options > Social Profiles > Your social profiles and click the “+” below one of the current icons, then select “Special: Email Icon” and add your “mailto” and email address, or a link to your contact page.

To change the size of the icon, try this code in the General Styling > Quick CSS field:

#top #header .social_bookmarks li a {
    font-size: 20px !important; 
}

adjust to suit.

Best regards,
Mike

Hi,

Thank you for using Enfold.

1.) Use this code to adjust the mobile menu breakpoint to 1200px instead of 990px.

@media only screen and (max-width: 1200px) and (min-width: 768px) {}
  .responsive #top .av-main-nav .menu-item-avia-special {
      display: block;
  }

  .responsive #top .av-main-nav .menu-item {
    display: none;
  }
}

2.) Adjust the font size and word wrap property of the h1 element on smaller screens.

@media only screen and (max-width: 1200px) {
  /* Add your Mobile Styles here */
  h1.av-special-heading-tag {
    font-size: 20px;
    word-wrap: break-word;
  }
}

Best regards,
Ismael