Making Text Blocks Responsive

[rocketboy]

Using a template from the design area I found headers that are scalable but don’t scale correctly on small device like an iphone.

In this case what kind of adjustments would you recommend to get the text to scale better with the screen size?

*referring to the text in the pink flower background area.

from https://www.naomiharman.com

Thank You!

[ruenel]

Hello Bryce,

Thanks for writing in!

In your Headline element, you should have this element settings:

If this isn’t working, please provide us your WP credentials so that we can check your element settings. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
- Confirmation that we can access and make changes to your site
​

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[rocketboy]

Thank you for your help! I do have this but it seems to not be working? I’ll include my login details to investigate further.

This area we’ve discussed has a flower background on each page with titles or call outs.

Thank you!

[ruenel]

Hello Bryce,

Please do not use margins in your Section elements. Those margins, especially your negative values will create issues sooner or later.

I also found out that you were using the Classic Row/Columns and have inserted this custom inline CSS in your section:

$el .x-container {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: stretch;
}

$el .x-column {
  display: flex;
  width: auto !important;
  margin: 0 !important;
}

$el .x-column:nth-of-type(1) {
  flex: 1 0 0%;
}

@media (max-width: 900px) {
  $el .x-container {
    flex-direction: column;
    align-items: flex-start;
  }

  $el .x-anchor {
    margin-top: 2em !important;
  }
}

Please use the new Row/Column elements and enable the Flexbox options in the Column element so that you do not need to add any custom CSS.

And lastly, you will have to set the base font of your Headline element to 1em and then use the calc(1em + 3.5vmin) in the Text Format. You might as well align the text content to the center.

Kindly let us know how it goes.

[rocketboy]

Thank you for the assistance! I had used the older elements from using design cloud templates. Why do you not recommend using the margin adjustments?

Thanks again!

[ruenel]

Hello Bryce,

With Section element, it is only recommended to use paddings. When you use Margins in it, it will change the position, gap or the space around and within the Section area which may create issues in a specific screen size sooner or later.

Hope this help.

[rocketboy]

Thank you for the info @ruenel

[tristup]

Hi Bryce,

Glad that we are able to help you.

Thanks