wide-width problem

Home Forums Reykjavik wide-width problem

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #21513

    oakhillman
    Participant

    wide-width problem

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Oliver,

    After updating to the latest version of Reykjavik it appears that some of the content on pages is not displaying in wide-width, or I’m not seeing the option to change it to wide-width. Page link with example provided. The top block is fine but all the text and heading blocks are too narrow.

    Mark

    #21518

    Oliver Juhas
    Keymaster

    Hi Mark,

    Please note that block editor (Gutenberg) does not enables wide/full alignment for all blocks. Actually, just a specific blocks get that treatment. I understand, this is another confusion block editor causes…

    The theme strives for the best readability and that’s why the most elements in content area have set max width (to around 70 characters per line). Previously (or when using Classic Editor) Reykjavik used outdented page content layout, which took care about readability on pages. On posts, the theme has always narrowed the content area down. Since the full support for block editor, I’m treating the page content similar way as post when it is built with block editor – narrowing the content down for better readability.

    If you want to widen “standard” elements of the page content the way it was before (with outdented page content disabled), you have 2 options I think:

    1. You should be able to apply wide alignment on any block by setting its CSS class to alignwide. However, I recommend thoroughly testing such solution on mobile screens as not all blocks apply proper horizontal spacing on mobile devices. The advantage of this solution is that you can narrow down the wide alignment on specific blocks only, while keeping the other ones intact.
    2. Or you can disable the theme’s page content narrowing with custom CSS:
      .has-blocks .content-area {
      	max-width: none;
      }

      But in this case I also suggest adapting wide alignment styles a bit as otherwise they don’t make sense on pages:

      .has-blocks .alignwide {
      	max-width: calc( 1.2 * var(--layout_width_content) );
      }

      This should work perfectly fine on any device.

    Tip: Please try using your web browser code inspector to determine the CSS for your theme modifications.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21534

    oakhillman
    Participant

    I applied the CSS in your second option and it works fine. But I’ve decided that for the sake of readability to let the theme defaults be what they are, so I removed the CSS.

    It’s possible a customer or two may complain about it and I’ll have to apply the CSS to some sites, but I’ll wait to see if I get any complaints.

    Thank you for providing the CSS solution in case I need it Oliver.

    Mark

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.