Hi,

Did you try removing the code I referred to above? That is what is adding space above the social icons:

#top .social_bookmarks {
    margin-top: 40px!important;
    font-size: 28px;
}

If you add a class to the container which holds the social icons, then it will be easier to target it with CSS.

Best regards,
Rikard

Hi,

This seems to be coming from your child theme:

#top .social_bookmarks {
    margin-top: 40px!important;
    font-size: 28px;
}

Try removing it, or put it in a media query if you only want that to apply on screens larger than mobile.

Best regards,
Rikard

Hi,

Glad to know that the suggestions above are working. To control the size of the product description on different screen sizes, please try this css code.

#av_product_description p {
  font-size: 44px;
}

@media only screen and (max-width: 1024px) {
  #av_product_description p {
    font-size: 38px;
  }
}

@media only screen and (max-width: 989px) {
  #av_product_description p {
    font-size: 32px;
  }
}

@media only screen and (max-width: 767px) {
  #av_product_description p {
    font-size: 24px;
  }
}

Please make sure to purge the cache after adding the css.

Best regards,
Ismael

Hey Sozo,

Thank you for the inquiry.

You can actually use html tags in the description field and add some css to adjust the style of the elements. To adjust the style of the default elements in the banner for example, you can use this css code.

#av_product_description  * {
    color: red;
    font-size: 99px;
}

To add a drop shadow to the description text, use this css.

#av_product_description p {
    text-shadow: 0 2px black;
}

Best regards,
Ismael

Hi,

Try this CSS as well:

.main_color label {
  color: red; 
  font-size: 36px;
}

.main_color input[type='submit'] {
  color: blue; 
  font-size: 24px;
}

Best regards,
Rikard

Hi Samuel,

Thanks for contacting us!

Please add following code to Quick CSS field in Enfold theme options > General Styling tab
1-

.avia_ajax_form label.input_checkbox_label {
  line-height: 1.3em;
}

2-

#top .avia_ajax_form .text_input, #top .avia_ajax_form .select, #top .avia_ajax_form .text_area {
  font-size: 20px;
  font-family: georgia;
}

If these do not help, please post a screenshot showing the changes you would like to make. You can upload your screenshots on imgur.com and post the links here :)

Regards,
Yigit

Hey,

Please edit your slide and then go to Styling > Font Sizes to change responsive font sizes – https://imgur.com/a/b5krQQk :)

Cheers!
Yigit

Hi,

Glad to know that the suggestions above are working. And yes, you can use the following css code to adjust the size of the menu item.

#top #wrap_all #av-burger-menu-ul li {
    font-size: 26px;
}

Default size is 18px. You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings after adding the css code.

Best regards,
Ismael

Hey John,

1- I edited your custom CSS code and changed

ul.social_bookmarks li a {
    background: #031926 !important;
    border-radius: 10px !important;
}

into following

#top #wrap_all .social_bookmarks li a {
    background: #031926;
    border-radius: 10px !important;
}

2- I edited following code

#footer-page ul.av-share-box-list li a {
    border-radius: 10px;
    background: #031926;
    margin-right: 15px;
}

and increased font size as following

#footer-page ul.av-share-box-list li a {
    border-radius: 10px;
    background: #031926;
    margin-right: 15px;
    font-size: 20px;
}

Please review your website :)

Regards,
Yigit

Hi,

Thanks for the update. I see where you have added a class now. Please try this CSS instead:

@media only screen and (max-width: 767px) {
#footer-page .email-link a {
    font-size: 10px;
}
}

Best regards,
Rikard

Hi,

If you add a class to the link, then you can target it like this:

@media only screen and (max-width: 767px) {
#footer-page a.your-class {
    font-size: 10px;
}
}

Best regards,
Rikard

Hi,
Thanks for your question, to make your red reservation icon half of its size on mobile you could use this css:

@media only screen and (max-width: 767px) { 
.avia-icon-list.av-iconlist-big .iconlist_icon {
    height: 32px;
    width: 32px;
    line-height: 32px;
    font-size: 16px;
}
}

but this will also affect some of your other icons, so you should add a custom class to all of your reservation icons and modify the css to include the custom class.
The two icons in your footer, RG and Blue Book, have a width of 12.5% on desktop, and a width of 48% on mobile, so to make them have a width of 12.5% on mobile you could use this css:

@media only screen and (max-width: 767px) { 
.responsive #top #wrap_all .slide-entry.av_one_eighth {
    width: 12.5%;
}
}

If you find this affecting other icons then you could also add a custom class to them.
After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,

Please try this CSS instead:

.wp-block-table th {
font-size: 16px;
font-weight: bold;
color: #222;
padding: 5px;
}

.wp-block-table td {
font-size: 16px;
color: #666;
text-align: left; 
padding: 5px;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background-color: #e4f1f5;
}

Best regards,
Rikard

Hi,

Please try this in Quick CSS:

.wp-block-table th {
font-size: 16px;
font-weight: bold;
color: #222;
}

.wp-block-table td {
font-size: 16px;
color: #666;
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
background-color: #e4f1f5;
}

Best regards,
Rikard

Hey cktanju,

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

.home .avia-slideshow .slideshow_align_caption a {
    font-size: 26px;
    background: red;
}

Best regards,
Rikard