Hi,

This particular css modification should increase the size of the icons.

#top .social_bookmarks li a {
    width: 40px;
    line-height: 40px;
    min-height: 40px;
    font-size: 18px;
}

#top .social_bookmarks li {
    width: 40px;
}

Add this css code inside the css media query to move the burger menu to the right side of the icons.

.av-main-nav-wrap {
    float: right;
}

Best regards,
Ismael

Hi,

Thank you for the update.

1.) Try to decrease the font size of the menu items and logo’s dimension on mobile view.

@media only screen and (max-width: 1024px) {
#top #header .av-main-nav > li > a {
    font-size: 14px;
}

.logo img {
    max-height: 80px !important;
    top: 20px;
}
}

2.) Add an arrow or any symbol beside the parent menu item to indicate that there are available sub menu items.

.av-main-nav .sub-menu .menu-item-has-children:before {
    content: '>';
    position: absolute;
    right: 10px;
    top: 5px;
}

Best regards,
Ismael

Hey paulohenrique,
Perhaps this solution will work for you:

in a code block on your page, add this code:

<hr class="hr-text">

then add this code in the General Styling > Quick CSS field:

hr.hr-text {
  font-family: Arial, sans-serif;
  text-align: center;
  line-height: 1px;
  height: 1px;
  font-size: 1em; 
  border-width: 1px 0;
  border-style: solid;
  border-color: #676767;
  margin: 20px 10px;
  overflow: visible;

  /* ensure 1px gap between borders */
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  -ms-box-sizing: content-box;
  -o-box-sizing: content-box;
  box-sizing: content-box;
}

hr.hr-text:after {
  content: "Enfold";
  color: #000;
  display: inline;
  background-color: #fff;
  padding: 0 0.5em;
}

Adjust the word “Enfold” to suit.

Best regards,
Mike

Hi,

Thank you for the update. Decrease the default padding to create more space for the button text.

.avia-button.avia-size-x-large {
    padding: 25px 20px 23px;
    font-size: 15px;
    min-width: 200px;
}

Add css media queries if you want to adjust the style of the button on mobile view.

// https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Best regards,
Ismael

Hey xxxinkxxx,

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

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

Best regards,
Yigit

Hi,

Your P tag had inline font size defined and it was overriding your font options in screen tab. I deleted inline styles. Please review your website.

Regards,
Yigit

Hi,
Thank you :)
FOOTER:
– Rope separator with drop shadow, same as header and https://www.campbellhillsguestranch.com.
For the shadow I added:

#footer {
box-shadow: 0px -1px 14px 4px rgba(0,0,0,.4);
}

– Can the social icons be in the footer, like https://www.campbellhillsguestranch.com?
the social icons are built into the socket, below the footer, I enabled so you can see at:
Enfold Theme Options > Footer > Default Footer Widgets & Socket Settings
– Can I add a button into the footer?
I added a button into your third footer widget area, HTML block. Notice the class is different than the top button so it will stay in the footer.

<a class="footer-res-button" href="https://www.campbellhillsguestranch.com/site/guest-ranch-vacations/rates-and-availability.html">Reservations</a>

the css:

a.footer-res-button,a.footer-res-button:visited {
    display: inline-block;
    font: 400 16px/32px 'EB Garamond',"Times New Roman",Georgia,serif;
    text-decoration: none;
    text-align: center;
    color: #fff;
    padding: 0 15px;
    margin: 0 auto;
    min-width: 24px;
    letter-spacing: .05em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px dashed #33270E;
    background-image: url(//static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG-light.jpg);
    background-repeat: repeat-x;
    background-position: left center;
    transition: transform .3s,box-shadow .3s;
}

BUTTONS:
– Can I customize the buttons to have a particular background image (not just colour)? They can all be the same, but Id like to use an image, like https://www.campbellhillsguestranch.com/.
I found buttons on the activity page and on the contact page, so I used them as the models for your buttons in which this css will add the background image:

a.avia-button {
    font: 400 16px/32px 'EB Garamond',"Times New Roman",Georgia,serif!important; 
    color: #fff!important; 
    border-style: none!important; 
    background-color: #e4d7bf !important;
    background-image: url(//static.campbellhillsguestranch.com/themes/CampBell17/images/layout/leatherBG-light.jpg)!important; 
    background-repeat: repeat-x;
    background-position: left center;
}

FORM:
– Can I customize the size of the words and spacing between form elements?
I only see a contact form on your site, so to change the font size please try:

#top label {
    font-size: 0.92em!important; 
}

I didn’t apply, this is the size it is now, try changing to “1.2em” or more to suit.
as for the form spacing I assume you mean to the right of “first name” & “email” so they are not touching:

p#element_avia_1_1,p#element_avia_3_1 {
padding-right: 10px;
}

I didn’t apply, please adjust to suit.

OK, so lets see how these look, we still need to fix the “overlapping”.
Hopefully, these will be ok and then we can tackle the “Body” :)

Best regards,
Mike

Hey nadinedomnink,

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

.single-product h1.product_title entry-title {
    font-size: 40px !important;
}

Best regards,
Rikard

Hey xxxinkxxx,

You are not targeting the actual elements, try this if you want to target paragraphs for instance:

#footer .textwidget p {
font-size: 4px !important;
font-weight: 300 !important;
}

Best regards,
Rikard

Hi,

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

.special_amp {
    font-family: sans-serif;
    font-size: inherit!important;
    font-style: inherit;
    font-weight: lighter!important;
    color: inherit!important;
}

Best regards,
Yigit

Hey macjeffff,

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

.sub-menu li {
  background-color:green !important;
}

.av-submenu-indicator:before {
  font-size:20px !important;
}

Best regards,
Rikard

Hi,
Please try adding this css to WordPress > Customize > Additional CSS:

.html_elegant-blog #top.page-id-3296 .entry-content-wrapper .big-preview.single-big {
    margin-top: 20px !important; 
}

#top.page-id-3296 h1.post-title.entry-title a {
    font-size: 38px !important;
    color: #70a874 !important;
}

The top rule is the current top margin between the title and image, please adjust to suit.
The second rule is the current font-size for the title, with the color of your button added, please adjust to suit.

Best regards,
Mike

Hi,

Theres a semi-colon missing in the code you posted:

#top .av-masonry-load-more {
   display: inline-block; 
   border-radius: 15px;
   transform: translateX(-50%);
   position: relative;
   top: 15px;
   color: #fff;
   background-color : rgb(30,205,215) !important;
   font-size: 24px !important;
}

If you should need any further help on this then we need to see the actual problem on a page to be able to help.

Best regards,
Rikard

Hey ehdavies,

You can wrap the text of your button in a span for instance:

<span style="font-size:20px; font-weight:bold;">Click me</span>

I’m not sure I understand what you mean by #3, I would advise you to let the text flow naturally, otherwise you will likely have text overflowing outside of the button itself.

Best regards,
Rikard

Hey mleite1,
To change the size of titles on different devices, try this code in WordPress > Customize > Additional CSS:

@media only screen and (max-width: 767px) { 
h3.av-special-heading-tag,h2.av-special-heading-tag,.eapps-instagram-feed-title  {
font-size: 10px !important;
}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) { 
h3.av-special-heading-tag,h2.av-special-heading-tag,.eapps-instagram-feed-title  {
font-size: 20px !important;
}
}

This is two sets of rules, the top set is for mobile up to tablet, and the font-size will be 10px, The second set is for tablet up to laptop, and the font will be 20px.
Your current rules will be for laptops and up including desktops.
Please feel free to adjust the font-sizes to suit.

Best regards,
Mike