[WordPress] How To Make Image Block 100% Width(Full Without Spacing) On Mobile | Featured Image, Additional CSS

The concept of eliminating image left and right margins on mobile
Adding code to additional CSS

If you look at the first image of this post, the left side has the left/right margin and the right side is full.
How do you feel?

When sharing posts on SNS, I think the first image of the article is as important as a thumbnail for attracting attention.

When the image is displayed, consider comparing left and right margins (Margin) with full width.

In my case, there is no left/right margin of the image and fullness is more impactful, and I think it will help to increase the concentration of what we will talk about later.

The default of WordPress is images with left/right margins. So, when writing, let’s find out how to set the 100% width of the image and how to write a detailed CSS code.

This site uses the Neve theme. What we’ll talk about in the future may depend on the theme you’re using. However, even if the detailed figures are different, I will share the basic method.

[워드프레스] 모바일에서 이미지 블록 가로폭 100%(가득차게, 여백없이) 하는 법

본 포스팅의 첫 이미지를 보면, 왼쪽은 이미지 좌/우 여백이 들어간 상태이고…

How do you choose an image that will be full of width? Idea?

Depending on the writer’s intention, some images will have to be full of width, and others will not.

My idea of how to set it up is that if you left-align the image as you write, it’s going to be a full horizontal image on your mobile.

Applies to mobile only

I don’t think there’s a reason why the width of image should be filled to 100% on a PC. Apply mobile only.

Image block alignment left

Since the left alignment is the default alignment, it can be used as an option to set 100% of the width of the image.

The center alignment is meaningful in small images, and the right alignment is meaningful in page style or Arabic, making it unsuitable for the feature.

The width of the original image is at least 1200 pixels

The way to explain it is to eliminate the left/right margin rather than force the image width to 100% on the mobile.

Thus, the width of the original image must be greater than or equal to the horizontal resolution of the mobile device.

If it’s smaller than that, it’s going to be 100 percent wide, and the pixels will break and not look clear. If the horizontal width of the image is greater than the mobile horizontal resolution, the responsive theme will adapt to the device.

1200 pixels is not an absolute number. Depending on the device and browser app, testing will be necessary.

However, in my case, there was no problem with the 800 * 420 pixel image on my smartphone, except for the tablet.

I think it would be nice if it was more than the size of the shared thumbnail. This is because the first image of the article is likely to be a thumbnail.

Please refer to the social media image size.

Image width 100%, how do you make it possible?

The default is to add code to the Additional CCS.

Apply on mobile devices only

Strictly speaking, it is when the width of the browser window is 1081 or less. Based on Samsung Galaxy smartphone, the width is 1080 Philcell. So, 1081 pixels.

@media all and (max-width: 1081px) {
    /* ... */
}

General Image Block

The HTML code generated by the general image block is shown below.

For override, it would be good to approach div.wp-block-image figure.alignleft. The right alignment is created with div.wp-block-image figure.alignright.

<div class="wp-block-image">
	<figure class="alignleft size-full">
		<img src="https://www.mysite.com/wp-content/uploads/2022/11/myimage.jpg" alt=""/>
	</figure>
</div>

The author uses the Neve theme. margin-left and margin-right can be adjusted according to the theme you use.

@media all and (max-width: 1081px) {
	/* for general image block */
	div.wp-block-image figure.alignleft {
			margin-left: -15px;
			margin-right: -15px;
	}
}

Spectra Image Block

Spectra plug-in has many useful blocks, so I use it a lot.
Among them, image blocks can have a shadow effect, so I use them often.

The Spectra image block generates the following HTML:

For override, it would be good to approach div.wp-block-uagb-image–align-left. The right alignment is created with div.wp-block-uagb-image–align-right.

<div class="wp-block-uagb-image uagb-block-ae07b21a wp-block-uagb-image--layout-default wp-block-uagb-image--effect-static wp-block-uagb-image--align-left">
	<figure class="wp-block-uagb-image__figure">
		<img srcset="https://www.mysite.com/wp-content/uploads/2022/11/myimage.jpg " src="https://www.mysite.com/wp-content/uploads/2022/11/myimage.jpg" alt="this is my image" class="uag-image-1108" width="" height="" title=""/>
		<figcaption class="uagb-image-caption">this cpation for my image</figcaption>
	</figure>
</div>

The author uses the Neve theme. margin-left and margin-right can be adjusted according to the theme you use.

@media all and (max-width: 1081px) {
	/* for spectra image block */
	div.wp-block-uagb-image--align-left   {
		margin-left: -15px;
		margin-right: -15px;
	}
}

Apply both general and Spectra image blocks

When the image is left-aligned when writing, the CSS code that allocates 100% width functionality to both the base and Spectra image blocks is as follows

The left/right -15 pixel margin is based on the Neve theme. You need to modify it to fit the theme you use.

@media all and (max-width: 1081px) {
	/* for general image block */
	div.wp-block-image figure.alignleft {
			margin-left: -15px;
			margin-right: -15px;
	}
	/* for spectra image block */
	div.wp-block-uagb-image--align-left   {
		margin-left: -15px;
		margin-right: -15px;
	}
}

After application, mobile previews on your PC may sometimes seem unapplied. I think it’s a problem that occurs because there’s a browser cache or because it’s different from the actual mobile environment.

After applying it, make sure to! I recommend that you share the link to messenger such as Telegram, WhatsApp, and Kakao Talk on your smartphone to check.

This is because the browser that opens in the messenger seems to be using its own browser without caching function.

[SurplsTimes] surplstimes@gmail.com