css – What is the cleanest way to reduce Gutenberg blocks to the width of a container?

With Gutenberg, blocks can be set to different widths. For example, an image can fill the standard grid container with around 1200 pixels or use the full window width. I have tested the following four CSS methods and have had problems with each approach. Which method works in real pages?

Gutenberg width selection

The well-known standard theme has a content area with full width and sets all blocks to container width if no special width adjustment is specified.

.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) {
  max-width: 58rem;
  width: calc(100% - 4rem);
}

Pro: Works with all blocks.

Con: Very stubborn CSS selector.

The content area is full width and is filled by all blocks. There is a special group block that reduces the blocks contained to the container width. This is the approach of the Elementor section block.

Pro: Works with all blocks, simple CSS

Con: Almost everything has to be wrapped up in this section block

The content area is full width. The Gutenberg blocks contain an element that shrinks to grid size.

lorem ipsum

Pro: Very simple CSS with explicit selectors

Con: Every single Gutenberg block has to be rewritten, as it normally doesn't have this element.

This is the approach of most topics. The content element has that at around 1200px. Each block that is wider gets a special CSS that grows above the parent block.

.entry-content .alignfull {
  margin-left: calc(-100vw/2 + 100%/2);
  margin-right: calc(-100vw/2 + 100%/2);
  max-width: 100vw;
  width: auto;
}

Con: Wrong width than 100vw contains the scroll bar, hacky CSS

Pros: none. It doesn't even work.

Web app – increase the navigation width to accommodate a long navigation element or decrease the font size?

You see a classic problem with dynamic content. With that in mind, I think it's worth considering how your design will hold (over time).

I would suggest that your design be able to handle dynamic content elegantly. To that end, I would suggest increasing the height of the element to include it on a second (or third) line based on the content. This would include setting a minimum height for your elements, but allowing the actual height to be dynamic.

If you expand the navigation width, the problem will either reappear in the future if another longer element needs to be added, or you have a navigation field in which the width changes over time depending on the content. This is possibly the worst case for the width of the viewport.

If you decrease the font size, you have an inconsistent size between elements, which for a user usually indicates an element with lower priority. If you reduced the font size for all elements, it would be better. However, since this is more difficult to do dynamically, you may have to do this over and over again as new items are added.

Suggest a good maximum width for the design of the liquid width

The majority of visitors have 1366px or wider screens

Note, however, that the screen size is not necessarily the size of the browser viewport

There's a separate version for mobile websites (so you don't have to respond).

What about tablet users? Do you get the mobile version? Or the full version? It's not necessarily a bad thing that they get the phone, but if the phone doesn't scale to tablet screens and your website doesn't shrink, you may frustrate users using tablets.

There is no correct answer to your question, we can only throw out different numbers, so this is not the best question for this format. The main reason for a fluid layout is to consider more browser size settings than if it weren't fluid. Therefore, I would consider setting your min and max options as low and high as it makes sense based on the content options and the legibility of the content in different widths.

CSS – width problem in responsive layout

I have a problem and it happens that some elements no longer take up 100% of the screen when I want to resize my website to different sizes. The elements that the Element Inspector highlights are the HTML tag and the body I've tried. Enter width, min-width in all possible ways and the problem persists. I use Sass and Flexbox. I leave a picture so the problem looks better.

Thank you very much Broad problem

Features – Automatic image scaling when uploading: two sets of add_image_size (); depending on the image width?

I have just started to optimize the scaling of the images that I upload with my WordPress program (via the media tool). After doing some research, I tried adding this code that I found in my functions.php file and it works fine:

add_theme_support( 'post-thumbnails' );

add_action( 'after_setup_theme', 'aw_custom_add_image_sizes' );
function aw_custom_add_image_sizes() {

add_image_size( 'og', 500, 9999 );
add_image_size( 'xxl', 400, 9999 );
add_image_size( 'xl', 300, 9999 );
add_image_size( 'l', 250, 9999 );
add_image_size( 'm', 200, 9999 );
add_image_size( 's', 150, 9999 );
add_image_size( 'xs', 100, 9999 );
add_image_size( 'xxs', 50, 9999 );
add_image_size( 'xxs', 40, 9999 );
add_image_size( 'xxs', 30, 9999 );
add_image_size( 'xxs', 20, 9999 );
add_image_size( 'xxs', 10, 9999 );
}

I also found out the srcset part.

But now I wonder if there is a way to use two different sets of "add_image_size" depending on the width of the image being uploaded. What I'm looking for is something like:

1 – If the image I wanted to upload is wider than 150 pixels, use this set:

add_image_size( ‘small’, 150, 9999 );
add_image_size( ‘medium’, 100, 9999 );
add_image_size( ‘medium’, 80, 9999 );
etc.

2 – If the width of the image is 150px or less, use this setting:

add_image_size( ‘small’, 150, 9999 );
add_image_size( ‘medium’, 100, 9999 );
add_image_size( ‘medium’, 80, 9999 );
etc.

The goal I am trying to achieve is obviously to avoid very small files on images that are designed to be large. Since I'm a beginner at coding, this may not be the way to go, and I'm open to suggestions!

Thank you very much

mobile – handling of long text in layouts with limited width

I am working on an application in which there are occasionally individual word strings that need to be displayed in a field that is not wide enough to contain the word unbroken:

Enter image description here

The example above is in German, but this also happens with rare English words.

Does anyone have any advice on how to deal with such texts? I could make the font smaller or try to separate the word, but none of these approaches is bulletproof. We tried to move the little icon at the bottom left, but it looks horrible in a place other than the lower left corner (for contextual reasons).

Any advice or thought that others can offer would be greatly appreciated!