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

Hi,

We replied here: https://kriesi.at/support/topic/popup-missing-form/#post-1480177

Best regards,
Ismael

Hi!

Thank you for the update.

Try adjusting the margin of the iframe container to align it to the center.

#top .mfp-iframe-scaler {
    width: 60%;
    margin: 0 auto;
}

View post on imgur.com

Cheers!
Ismael

Hey Loveronika,

Thank you for the inquiry.

We set the first row to have an equal height so it’s the same as the next rows. We also removed the custom top and bottom margins.

View post on imgur.com

If you need to adjust the spacing on mobile view, please add this css code:

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

  /* Add your Mobile Styles here */
  #top .flex_column_table.av-equal-height-column-flextable:not(:first-child) {
    margin-top: 0;
  }
}

Best regards,
Ismael

Hi,

We adjusted the css code and added another for mobile view.

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

  /* Add your Desktop Styles here */
  #top .av-m8dhdoo2-9be497766191be21636491354eb51ed0 .avia-content-slider-inner {
    max-height: 180px !important;
    overflow: hidden;
  }
}

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

  /* Add your Mobile Styles here */
  #top .av-m8dhdoo2-9be497766191be21636491354eb51ed0 .avia-content-slider-inner .slide-entry {
    max-height: 115px !important;
    overflow: hidden;
  }
}

View post on imgur.com

Best regards,
Ismael

Hi,

Thank you for the screenshot.

Looks like you managed to add spacing above the button with this css code.

#package-section .avia-button-wrap {
    padding-top: 3.5em !important;
    padding-bottom: .2em !important;
}

View post on imgur.com

Best regards,
Ismael

Hey nicolealbaek,

Thank you for the inquiry.

There is no overlay option for the Column element, but you can apply a background in the Styling > Background panel. For the gradient effect, you can use the Color Section element, toggle the Styling > Background Overlay > Enable Overlay? option, then apply the class name “av-custom-gradient-section” in the Advanced > Developer Settings > Custom CSS Class field. Add this code to override the default overlay color with a gradient.

#top #wrap_all .avia-section.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;
}

Best regards,
Ismael

Hi,

Thank you for the info.

You can add this css code to adjust the padding around the menu button:

#top #wrap_all #header #menu-item-848 {
    padding: 0 20px;
}

You may need to toggle or temporarily disable the Enfold > Performance > File Compression settings, then purge the cache afterward.

View post on imgur.com

Best regards,
Ismael

Hi,

What is the screen resolution of your laptop? If it has a lower screen resolution, you could decrease the max-width value, then adjust the Enfold > General Layout > Maximum Container Width. Make sure to purge the cache or remove the browser history before checking.

Best regards,
Ismael