Hi,

It seems to be working correctly when we checked (see screenshot below). To resize the background, make sure to set the Styling > Background > Background Repeat of the grid row element to Stretch to fit.

If you have any additional questions at this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thanks!

Best regards,
Ismael

Hi,

Thank you for the inquiry.

The testimonial entries are there, but the text color is different. Please try to add this css code:

#top .avia-testimonial-markup-entry-content {
    visibility: visible !important;
    color: #ffffff !important;
}

Let us know the result.

Best regards,
Ismael

Hi,

Thank you for the update.

Have you tried using the Fullwidth Slider? You can also try this css to limit the size of the color section on smaller screens.

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

  /* Add your Mobile Styles here */
  #top .avia-section.av-zjsv-901082093e6d72f3482787541e1c8070 {
    max-height: 200px;
    background-size: contain;
  }
}

You may also need to adjust the elements inside the color section. We recommend applying custom css class names to the elements inside the text block, as they are custom coded, so you can modify their style for smaller screens.

Best regards,
Ismael

Hi,

Thank you for following up.

Did you set the cell’s Styling > Background > Background Repeat to Stretch to fit? Please refer to the screenshot below.

You can also use this css code:

.responsive #top #wrap_all .av-flex-cells .no_margin {
    background-position: 50% 100%;
    background-size: cover;
}

Screenshot from a display with a larger screen resolution.

Best regards,
Ismael

Hi,

I set it for 9px as a visual test for each screen setting

We kept it at 9px so you can clearly see the difference. The changes you made are displaying correctly on our end — please try clearing your browser cache.

Unfortunately, there is no global toggle or setting for text or heading alignment. You may need to adjust this using custom css code.

#top .fullsize .template-blog .post .entry-content-wrapper {
    text-align: left;
}

Let us know if you have more questions.

Best regards,
Ismael

Hi,

Please try this as well:

#header_meta .sub_menu {
  top: 0;
}

Best regards,
Rikard

Hi,

Thanks for the update. If you have additional problems which are not related to the original topic, then please open a new thread.

Best regards,
Rikard

Hi,

Please try this CSS as well:

#menu-item-764 {
  background-color: red;
}

#menu-item-920, #menu-item-988 {
  margin-top: 15px;
}

#header_meta #sub_menu {
  margin-top: -11px;
}

Best regards,
Rikard

Hi,

We adjusted the css code to accommodate various column sizes and maintain a maximum content width of 1400px.

#top #gridtest {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto;
}

#top #gridtest > .av-gridrow-cell {
  box-sizing: border-box;
}

#top #gridtest .flex_cell_inner {
  margin: 0 auto;
}

#top #gridtest .av-gridrow-cell.no_margin.av_one_fifth {
  flex: 0 0 20%;
  max-width: 280px;
}

#top #gridtest .av-gridrow-cell.no_margin.av_two_fifth {
  flex: 0 0 40%;
  max-width: 560px;
}

#top #gridtest .av-gridrow-cell.no_margin.av_three_fifth {
  flex: 0 0 60%;
  max-width: 840px;
}

#top #gridtest .av-gridrow-cell.no_margin.av_four_fifth {
  flex: 0 0 80%;
  max-width: 1120px;
}

#top #gridtest .av-gridrow-cell.no_margin.av_full {
  flex: 0 0 100%;
  max-width: 1400px;
}

@media (max-width: 768px) {
  #top #gridtest > .av-gridrow-cell {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

Best regards,
Ismael

Hey Kelly,

Thank you for the inquiry.

Try to add this css to adjust the default top margin of the SVG icons in the header:

#top .social_bookmarks li.avia-svg-icon img[is-svg-img=true], #top .social_bookmarks li.avia-svg-icon svg:first-child {
    height: 1em;
    width: auto;
    margin-top: 3px;
}

Then include the following to realign the SVG icons with the font icons inside the content container:

#top #main .avia-svg-icon.avia-font-svg_entypo-fontello svg:first-child {
    stroke: unset!important;
    top: 8px;
    position: relative;
}

Result:

We recommend uploading a similar custom SVG icon for the instagram icon to fix the alignment issue.

Let us know the result.

Best regards,
Ismael