Paragraph width

  • Resolved rod

    (@nomadarod)


    3 years, 8 months ago

    Hi Oliver,
    I often find this css in the inspector determining the paragraph’s width:

    [class*="inner-container"] > :not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width {
    max-width: var(--responsive--aligndefault-width);
}

    In the page linked here you can find it in the slider text.

    I don’t understand why this class is present only sometimes; it seems that inside some blocks the paragraph’s width follows the width of the group-block that contains it, while in other blocks it doesn’t. And paragraphs are the only element that doesn’t come with an alignful or alignwide button in the settings.

    Can I change it to width: 80%, for example, in order to make it larger without compromising the responsiveness? I didn’t start posting in the blog yet; I wonder if this is a style applied in that situation too?

    Thanks,
    Rod

    • This topic was modified 3 years, 8 months ago by rod.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter rod

    (@nomadarod)

    I tried to apply a specific class to different block-groups that includes those elements so I would change their width only in this specific situation, but I couldn’t select them effectively.
    I tried also to include different sections of the text in different group-blocks with different widths so that in the end the texts would align differently. 

    .wp-block-group .slider_atelier-date{
	max-width:90%;
}
#gutenslider-9ucoxtgz8 .slider_atelier-briefing{
	max-width:80%;
}
.slider_atelier-briefing [class*="inner-container"] > :not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
	max-width: var(--responsive--alignwide-width);
}

    Any ideas how I could do this effectively and/or in a cleaner way?

    Rod

    • This reply was modified 3 years, 8 months ago by rod.
    Plugin Author Oliver Campion

    (@domainsupport)

    Hi Rod,

    You can change the --responsive--alignwide-width and --responsive--aligndefault-width without messing up the responsiveness by using the sliders in “Customizer – General Options”.

    This also keeps compatibility with older browsers like IE11 that can’t use the var() function in CSS.

    We don’t recommend using var() in your Additional CSS because it won’t work in older browsers.

    Please note that max-width in this theme is dealt with in pixels and not as a percent of the screen width. If you want an element to always be 80% width of the screen then you should use the width attribute and set max-width to none.

    Although you probably only want to do this on larger screens so wrap it in a media query like …

    @media only screen and (min-width: 482px) {
.slider_atelier-briefing {
width: 80%;
max-width: none;
}
}

    I couldn’t find an element on your page with an ID of gutenslider-9ucoxtgz8.

    Oliver

    Thread Starter rod

    (@nomadarod)

    Wonderful! great feeling to get to understand it. And thanks for those sliders in the “general options”. It worked great!

    Thank you,
    Rod

    Plugin Author Oliver Campion

    (@domainsupport)

    No problem.

    I’ll mark this one as “resolved” now.

    Oliver

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Paragraph width’ is closed to new replies.