Twenty Twenty featured image wider than 1200px — full viewport width

  • I’m attempting to create pages where the Featured Image displays immediately below the Header, and the Featured Image expands beyond its 1200px default width—expands left and right as does the Header content to the Header content’s 2000px limit.

    I’ve tried the css solution from this thread from a Twenty Twenty user, but it had no effect.

    I’ve tried increasing the Thumbnail size in Settings>Media to 2000px and reloaded the Featured Image, but the 1200px wide image was still selected by WordPress for display. I also attempted to set the Featured Image/Thumbnail size in the Twenty Twenty theme’s function.php, but that too had no effect. Still it was a 1200px wide image used by WordPress for this page.

    Further, I’ve attempted to use css on .featured-media img to increase the element’s width and max-width. This did allow the Featured Image to expand to the right well beyond 3000px, but not to the left? Not ideal on its own anyway, as it is scaling a lower resolution image.

    All guidance appreciated. I’m just now beginning the process of migrating this Squarespace site to WordPress, where this banner image design element predominates across nearly all that site’s pages.

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

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

    (@thaiclimate)

    I achieved my objective by abandoning the Featured Images approach. I installed the twentig plugin and used their Full Screen Cover Image block to deliver the design element I was looking for. Thank you to those developers.

    Anonymous User 14254218

    (@anonymized-14254218)

    that’s exactly what the cover template and cover blocks (full alignment) are used for. could you elaborate on what exactly did not work with those?

    Thread Starter ThaiClimate

    (@thaiclimate)

    Thank you for steering me further to the built-in functionality. Clearly user error and ignorance sent me to the plugin a bit hastily—at least relative to achieving the above. Slightly related, I have noticed that the plugin does offer the ability to implement column-reverse for mobile stacking of text/media blocks. That does not yet appear to be built-in, but not much css, if one wishes to go without the plugin.

    Anonymous User 14254218

    (@anonymized-14254218)

    Oh okay, I didn’t know you you didn’t try those out yet ??

    Did you manage to achieve your goals with the cover template and blocks?

    AFAIK the text/media blocks use grids (at least they did in 5.3 and twentytwenty v1.0). I didn’t update my reference project for some time now and will do as soon as I finish my event plugin because it seems like a lot of css got cleared up with the last updates.
    If you need some help though, feel free to ask.

    cheers

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Twenty Twenty featured image wider than 1200px — full viewport width’ is closed to new replies.