Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

Some issues with the width of a WordPress_Theme: how to get full width

Featured Replies

hello dear community, good day.   😉

hello dear Fisicx - and all the experts. 🤩

 

you have allready helped me alot here in the forum  - with some of my basic (and beginner) questions for designing a webpage. 

So at the moment i am struggling with some extra-issues.  And as i suppose that here many experts that are experienced with web-design  - and that there also some wp-experts may be around here, i thought  that this might be a good thing to ask here: 

well i run into a issue: With the theming: - note - i run the theme TT4 Twenty Tweny Four 

the question is:  how to  set the grapic to max '(full) widht : how to !? (with the backend-view on all tools)

 

image.thumb.png.a89739b019671cd1eae4b6014cce2fad.png

 

image.png.c2e0623f00f4223b7f5cbd42f412fdc5.png

well the above image shows the backend - and now - see the frontend.

 

dear friends: well  i hope i was able to spell out - what the problem is!?

if you need more data / input - plz lemme know

regards  yours Saint O

Edited by saint_o

  • Author

 

good day dear friends, 🙂

well after some musing and tweaking around i ve seen some progress: 

see for more infos - the Twenty Twenty-Four-theme-manpages: https://wordpress.org/documentation/article/twenty-twenty-four/
This manual - is awesome: it has helped me alot - and besides that i have had some hours of YT-Videos covering the theme!! 

well conclusio: i think that the image isn't displayed across the full width in the Twenty Twenty-Four theme due to following  reason and therefore , i  guess we have alltogether several - or hmm three options and pathways 

1. WordPress Block Settings:
i unfortunatly currently have your image embedded in a Stack/Group block.
By default, this certain block doesn't have a "full width" setting, but only "wide width" or "content width."
Therefore, the image is aligned to the content container, not the so called viewport.

after having looked into the manpages of the theme i found out a possible solution:

In the editor, i need to select the Image block or (even better) the parent Group/Stack block.
The alignment options are then available at the top of the toolbar:

"Standard"
"Wide"
"Full Width"

here - according the manpages i have to select Full Width-mode. Then the image will then stretch across the entire browser width - what is wanted here.

2. Theme Feature: Twenty Twenty-Four

The theme uses the so called new block-based template system (Site Editor).
In some templates (e.g., "Page" or "Home"), there are containers that limit the maximum width.
If “full width” is not visible → check:

The group block above it must also be set to "Full Width."
If necessary, adjust the template structure in the Site Editor (Design > Editor > Templates) so that the container isn't limiting.

3. CSS Fallback (if necessary - a more hackish and tweak like solution - but anyway: )
If this doesn't work at all, i could add custom CSS in the Customizer or Site Editor:

.wp-block-image img {
width: 100% !important;
max-width: 100% !important;
}

 


well this tweak hmm i think it would force the images to truly fill the full width.

additional tip:

In the editor, i could go to the image block → "Full Width" in the bar at the top.

If that would not be possible, i could set the parent group/stack to "Full Width."

If the theme container still restricts the width → i finally could adjust the template in the site editor.

hmm - well i try out these steps. And - well i hope that these steps could be helpful to others too

greetings yours Saint O

again: the conclusio of the day:  see for more infos - the Twenty Twenty-Four-theme-manpages: https://wordpress.org/documentation/article/twenty-twenty-four/
This manual - is awesome: it has helped me alot - and besides that i have had some hours of YT-Videos covering the theme!! 

yours saint O

Edited by saint_o

  • Author

 

good morning dear fisicx ;)

 

many thanks for the quick reply - great to hear from you🫠

Quote

 

It's quite simple. You just make your image a background on the page body.

Use your code inspector to find the appropriate DIV.

 

thank you so much! I will try out this option - with the image as a background.

 

BTW: glad to be here at the forum - its so good. 

Thank you -. have a great day. 

greetings Saint O ;)

 

 

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.