Display problems

Hey Veronika,

Thank you for the inquiry.

Where can we see the issue? Please provide a direct link to the page or post so that we can check it. We cannot find the post shown in the short clip and it is quite blurry, so we cannot read the URL field.

Best regards,
Ismael

Hi,

Thanks for the link.

It resizes like that because the left and right padding is set to 330px. Did you configure the left and right padding of the column, or did you add this css code?

.flex_column.av-kyq43cw8-afa5fb8d3eb4c9e6c5e2c109354aec12 {
    padding: 30px 330px 30px 330px;
}

Instead of adding a large padding, try to use the column elements to control the width of the text block.

Best regards,
Ismael

Hi,

Did you move the content inside the columns as we suggested above? Try to insert two 1/5 element in a row and place a 3/5 column in the middle, then move the content inside the middle 3/5 column. This should limit the width of the text and the columns should respond accordingly on smaller screens or when the browser is resized.

Best regards,
Ismael

Hi,

Thank you for the update.

It is probably easier if we create an example. Please check the post in the private field. We added three color sections in that post, one contains the image above the content and the other one below. We then applied a custom css class name (av-post-content-container) to the color section containing the text so that we can adjust and control the container width. This is the css code.

.av-post-content-container .container {
	width: 63%;
}

You can use css media queries to adjust the width on different screen sizes.

Example:

@media only screen and (min-width: 768px) {
  /* Add your Desktop Styles here */
  .av-post-content-container .container {
    width: 63%;
  }
}

This will only apply the changes on screens larger than 768px.

Best regards,
Ismael

Hi Veronika,

If you would like to apply the same styling on other Color Section elements, you can do so by editing them and giving them “av-post-content-container” custom CSS class in Advanced > Developer Settings.

If you would like to adjust the width of 1/1 column element, please edit it and give it a custom CSS class (“custom-css” in example below) and then add following code to bottom of Quick CSS field

#top .custom-css.flex_column {
  max-width: 58%;
  margin: auto;
  float: none;
}

Best regards,
Yigit

Hi,
Please try this instead:

.responsive #top #wrap_all #main .av-post-content-container-bild .container {
width: 77%;
}
.responsive #top #wrap_all #main .av-post-content-container-text .container {
width: 65%;
}

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

Best regards,
Mike