Picture with headline

Hey northorie,

Thank you for the inquiry.

You can replicate the layout by adding a Text Block within a Column element, apply the yellow background to the column, then go to Advanced > Developer Settings. In the Custom CSS Class name field, add “av-custom-header-column”. Then add the following code in the Quick CSS field to adjust the position of the text block within the column.

#top .av-custom-header-column .avia_textblock {
    padding: 40px 20px;
    background: white;
    position: absolute;
    right: -50px;
    top: 50px;
}

Best regards,
Ismael

Hi,

You can do that by adding the same CSS inside of a media query:

@media only screen and (max-width: 767px) {
#top .av-custom-header-column .avia_textblock {
    padding: 40px 20px;
    background: white;
    position: absolute;
    right: -50px;
    top: 50px;
}
}

Then change the values to fit your needs.

Best regards,
Rikard

Hi,

Thank you for the update.

You can adjust the value of top and left property on smaller screens and specify the height of the column. We adjusted the css code a bit:

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

  /* Add your Mobile Styles here */
  #top .av-custom-header-column .flex_cell_inner {
    height: 400px;
  }

  #top .av-custom-header-column .avia_textblock {
    right: -50px;
    top: 50px;
  }
}

Best regards,
Ismael