Hi,

Great, I’m glad that Mike could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hi,

Great, I’m glad that we could help. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey Alex,

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

.container_wrap {
    border-top-width: 0;
}

Best regards,
Rikard

Hi,
I updated your custom css in your Quick CSS from this:

#top div .av-dark-form input[type="text"] {
  color: #222;
  border-color: #222;
  border-width: 1px !important;
  background-color: transparent;
  font-size: 15px !important;
  letter-spacing: 1px;
}

to this:

#top div .av-dark-form input[type="text"],
#top #main .av-dark-form input[type="email"] {
  color: #222;
  border-color: #222;
  border-width: 1px !important;
  background-color: transparent;
  font-size: 15px !important;
  letter-spacing: 1px;
}

and now your email field border width matchs the other fields
Please clear your browser cache and check.

Best regards,
Mike

Hey dweddell,
Thank you for the link to your site and your screenshot, try adding a max-width: 33%; to each of your three elements for mobile like this:

@media only screen and (max-width: 767px) { 
	.responsive #top #header #header_main .inner-container .main_menu {
    order: 1;
    flex-basis: auto;
    align-items: center;
    align-self: center;
    height: inherit !important;
    width: 33%;
}
.responsive #top #header #header_main .inner-container .logo {
    order: 2;
    flex-basis: auto;
    min-width: 100px;
    z-index: 9;
    transform: translateY(30%);
    margin-top: -30px;
    max-width: 33%;
}
.responsive #top #header #header_main .inner-container .widget {
    order: 3;
    flex-basis: auto;
    padding: 0;
    clear: none!important;
    justify-content: center;
    align-self: center;
    align-items: center;
    z-index: 1;
    max-width: 33%;
}
}

This is the expected results:

Best regards,
Mike

Hey Gianluca,

The price is red on my end, please try checking in a private browser window if you don’t see any changes.

Try this CSS in order to change the + and – sign in the quantity boxes:

#top .main_color .quantity input.plus, #top .main_color .quantity input.minus {
    color: #fff;
}

Best regards,
Rikard

Hi,

Great, I’m glad that you got it working. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard

Hey xfacta,

Thank you for the inquiry.

You can use the following css code to adjust the style of the elements inside the header meta or the small bar above the main menu.

#top #header_meta a, #top #header_meta li, #top #header_meta .phone-info {
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-weight: 300;
    text-decoration: none !important;
}

#header_meta .sub_menu {
    float: left;
    z-index: 2;
    font-size: 1.2em;
    line-height: 30px;
    position: relative;
    top: 10px;
}

#header_meta .phone-info {
    float: left;
    font-weight: bold;
    line-height: 20px;
    font-size: 1.2em;
    padding: 5px 0;
}

And to re-enable the social bookmarks on mobile view, you can include this css code.

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .responsive #top #wrap_all #header .social_bookmarks,
  .responsive #top #wrap_all #main .av-logo-container .social_bookmarks {
    display: block;
  }
}

Best regards,
Ismael

Hi,

Thank you for the update.

Did you remove the css code? Please add it again, then include the following css rule to hide the duplicate social icons beside the burger menu.

.responsive #top #header_main .main_menu .social_bookmarks {
    display: none;
}

Best regards,
Ismael

Hey liesbethp1,

Thank you for the inquiry.

1.) You can add this css code to adjust the margins around a specific masonry item.

.av-masonry-container .av-masonry-entry:nth-child(2) {
  margin-top: 200px;
}

.av-masonry-container .av-masonry-entry:nth-child(4) {
  margin-top: 100px;
}

The css code above should affect the first and third items in the gallery.

2.) Have you tried creating a Custom Elements Template for a Masonry Gallery? Please check the link below for more info.

// https://kriesi.at/documentation/enfold/custom-element-templates/

Best regards,
Ismael

Hi Lion,

I’m sorry for the delayed response.

Please add the following code to the Quick CSS in Enfold theme options > General Styling:

/* To fix the background images on tablet */
@media only screen and (max-width: 1024px) {
    .touch-device #top .avia-section.avia-bg-style-fixed {
        background-attachment: scroll;
    }
}

/* To fix the Social Share icons on mobile */
@media only screen and (max-width: 480px) { 
    .av-social-sharing-box:not(.av-social-sharing-box-rounded, .av-social-sharing-box-buttons, .av-social-sharing-box-default, .av-social-sharing-box-minimal) .av-share-box ul li {
        display: inline-block;
    }
	.av-social-sharing-box-circle .av-share-box ul li, .av-social-sharing-box-icon .av-share-box ul li {
    	margin-bottom: 2px;
    }
}

After adding the code, please make sure to clear any server-side, plugin-based, and browser caches.

Best regards,
Yigit

• This reply was modified 2 years, 2 months ago by Yigit.

Hi,
Thank you for the link to your site and the screenshot, but I’m not able to reproduce this with my laptop rotating it from portrait to landscape and back again, or with the browser inspector emulating different screen sizes and rotating. But you could try this script in your child theme functions.php to reload the page after a screen resize and perhaps it will help with your laptop.

function custom_resize_script() { ?>
  <script>
var resizeId;
window.addEventListener('resize', function() {
  clearTimeout(resizeId);
  resizeId = setTimeout(doneResizing, 300);
});

function doneResizing(){
  location.reload();
}
</script>
  <?php
}
add_action( 'wp_footer', 'custom_resize_script', 99 );

Best regards,
Mike

Hi,

Thanks for the update. Please let us know if you should need any further help on the topic, or if we can close it.

Best regards,
Rikard