Hey nancyT,
I don’t have a iPhone, do you mean this:

If so try this css:

@media only screen and (max-width: 450px) { 
	#top #payment div.payment_box {
    width: 100%;
    padding: 0;
	}
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.avia-icon-list .iconlist_icon svg:first-child, .avia-icon-list .iconlist_icon img[is-svg-img="true"] {
    margin-top: 11px;
    margin-left: -6px;
}
.avia-svg-icon svg:first-child, .avia-svg-icon img[is-svg-img="true"] {
    height: 1em;
    width: 2em;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike

Hi,
Try adding this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.page-id-1424 .header_color.av_header_transparency .avia-menu-fx {
	background: #7d8286;
}

After applying the css, please clear your browser cache and check.
please note the page ID in the css page-id-1424

Best regards,
Mike

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

#top.page-id-1424 #header.header_color.av_header_transparency .av-main-nav > li > a .avia-menu-text {
	color: #7d8286;
}

please note the page ID in the css page-id-1424

Best regards,
Mike

Hey GaWi,
It looks like for each menu item you have two sections on your page with the same ID, one for desktops, and one for mobile.
So on mobile the links are pointing to the hidden section.
It is a standard HTML rule to use each ID only once on your page, please change the mobile IDs to something else that is unique and then create a new menu for mobile use.
Then go to Enfold Theme Options ▸ Main Menu ▸ General ▸ Alternate Menu For Mobile and choose your mobile menu.

Best regards,
Mike

Hi,

Thank you for the info.

The breadcrumb container is present but is being covered by the header. Try to add this css code to adjust the top padding of the main container.

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

  /* Add your Mobile Styles here */
  .html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 65px !important;
  }
}

(removed screenshot)

Best regards,
Ismael

Hi,

Looks like the nav animation doesn’t run on mobile view, rendering it invisible. Try to include this css code:

.responsive #top #wrap_all .av-flex-cells .avia-slideshow-arrows a {
    opacity: 1;
}

Best regards,
Ismael

Hey rixi,

Thank you for the inquiry.

You can try this css code:

#top #wrap_all .social_bookmarks li {
    color: #000;
    background-color: #fff !important;
}

#top #wrap_all .social_bookmarks li a {
    color: #000;
}

Screenshot: https://imgur.com/cCzmGAe

Best regards,
Ismael

Hi,

Glad to know it’s working. Yes, you can use it with the Grid Row element, but you may need to adjust the css a bit.

#top #wrap_all .av-custom-gradient-section {
  background-color: transparent;
  background-image: linear-gradient(180deg, #FFFFFF21 23%, #FFCBA4 93%);
  opacity: 1;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}

To apply different gradient colors, add another Custom CSS Class name to the element, such as “av-custom-gradient-section av-gradient-black-to-white” or “av-custom-gradient-section av-gradient-red-to-white”, then specify the gradient with this css:

#top #wrap_all .av-gradient-black-to-white {
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 65%);
}

#top #wrap_all .av-gradient-red-to-white {
  background: rgb(255,0,0);
  background: linear-gradient(0deg, rgba(255,0,0,1) 0%, rgba(255,255,255,1) 65%);
}

You can use this tool to generate the gradient CSS properties: https://cssgradient.io/

To apply a background image with a gradient, you’ll need to use the Color Section element. As instructed above, you need to enable the color overlay.

Best regards,
Ismael

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

Hey hisdi,

Thanks for reaching out.

You can add this css code to adjust the position of the scroll down arrow:

#top .scroll-down-link {
    bottom: 100px;
    margin: 0;
}

#top .av-section-color-overlay-wrap {
    position: relative;
}

Best regards,
Ismael

Hi,

The width of the meta info is limited to 40em. To adjust it, you can add the following css code:

#top .fullsize .template-blog .post .entry-content-wrapper > * {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

Best regards,
Ismael

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

Hey mary301187,

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

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

#top .fullsize .template-blog .post_delimiter {
  border-bottom-width: 0;
}

Best regards,
Rikard