Would you like to modify the block's width and height in WordPress?
By default, WordPress makes it simple to use blocks to design stunning content layouts for your posts and pages. However, occasionally you might want to resize blocks to improve their appearance.
This post will demonstrate how simple it is to modify the block's height and width in WordPress.
 |
| Modifying block width and height in WordPress |
Why Modify the Block Width and Height in WordPress?
You can add content to your WordPress website using a variety of blocks, including headlines, paragraphs, photos, videos, audio, and more, using the block editor.
To improve a particular block's appearance or the content layout as a whole, you may want to modify its width or height sometimes.
By adjusting block sizes, you can also make sure that your content responds to screen sizes and renders correctly on all gadgets, including laptops, tablets, and mobile phones.
For instance, you might have uploaded a huge image in the content editor that detracts from the aesthetics of the page.
 |
| Unappealing images uploaded on the page |
Or, to better match the heading block with the content, you might wish to modify its size.
You can improve the aesthetics of your posts and pages by modifying the blocks' width and height.
Let's now look at how simple it is to alter the block's height and width in WordPress.
Method 1: Using Block Settings, change the block's height and width
For this technique, we'll demonstrate how to modify a block's height and width by utilizing the WordPress default settings.
WordPress does not currently provide the same scaling choices for every block. The block editor, however, offers a variety of options for changing the height and width of certain blocks.
Let's begin with WordPress's Image block.
By selecting the 'Align' button in the toolbar above the Image block, you may first adjust the alignment of the block.
The block will become the same width as the container in this case if the 'Wide Width' option is selected.
Alternatively, the block will fill the complete width of the page if the 'Full Width' alignment option is used.
 |
| Alignment setting to reset the image size |
Additionally, you can resize a block by navigating to the "Settings" section of the "Block Settings" panel on the right. Through the 'Image Size' dropdown option, you can resize a block from this point.
By entering the desired pixel size in the 'Width' and 'Height' boxes under the 'Image dimensions' heading, you may also change the block's width and height.
You can also change the block's size by a percentage below that.
 |
| Resizing an image using block settings |
By clicking on the image itself, a blue border with circular anchors will appear, allowing you to change the size of an Image block in another method.
The height and width of the picture block can then be adjusted by simply dragging these anchors.
 |
| Resize the image to your desired size |
Once finished, save your settings by clicking the 'Update' or 'Publish' button.
Method 2: Modify the Block's Height and Width Using the Columns Block
This method is appropriate if the block you wish to resize lacks alignment buttons or resize options.
We'll insert our block for this technique within the Columns block. You can add blocks in each column by using it as a container. Then, you may change the blocks' dimensions by modifying the columns' height and width.
The 'Add Block' (+) button is located in the top left corner of the screen.
 |
| Choose the column block |
The screen will then show the column arrangement, and you can then add the desired block by clicking the "Add Block (+)" button inside a column.
The 'Column settings' option can be found in the right panel and is used to resize the block after it has been installed.
Simply find the Columns block and add it to the content editor from here. You will then be prompted to select an alternative.
 |
| Add blocks using the column |
To save your changes, just click the "Publish" button after you are finished.
This is how the information appeared on our sample website after being resized and aligned inside of a two-column block of two paragraph blocks.
 |
| Column block preview |
Method 3: Modify the Block's Height and Width Using the Group Block
Using the Group block, you can additionally modify the width and height of blocks. You can group many blocks and style them collectively.
The 'Add Block' (+) button at the top must first be clicked. The Group block must then be found and added to the content editor.
Following that, three distinct layout possibilities will be shown in the Group block, allowing you to select one. We will make use of the 'Group' layout for this tutorial.
 |
| Choose the group block |
The 'Add Block' button will then appear on the screen. Any block you want to add can now be done.
We'll be adding and changing the size of a Heading block, a Paragraph block, and an Image block in this tutorial.
 |
| Add the block(s) to group |
You must click the 'Select Group' button on the block toolbar to add numerous blocks to the Group.
Simply click the 'Add Block' button (+) at the bottom once the Group has been chosen.
 |
| Add multiple blocks to the group |
The block settings are also displayed when you click the 'Select Group' button in the right column. From this point, it is simple to change the order, justification, and orientation of any block.
The various block sizes will also change if the layout is altered. Until you are satisfied with the outcome, you can adjust these options.
 |
| Configure the block settings of the group block |
Once finished, save your settings by clicking the 'Update' or 'Publish' button.
On our test website, the Group block appeared like this.
 |
| Group Preview |
Method 4: Using the Cover Block to Modify Block Height
If you want to use the Cover block, you should use this resizing technique. You can do this to show text and other stuff over a picture or video.
The Cover block must first be located by clicking the "Add Block" (+) button at the top.
Once you've done that, a color selection or an image upload from the WordPress media library will be shown to you. The Cover block's background will be made out of this picture or color.
 |
| Add cover block |
Drag and drop any block you choose into the Cover block after that.
The Cover block must then be clicked to reveal its block settings in the right column.
From here, navigate to the 'Dimensions' page to change the Cover block's height in pixels.
 |
| Change cover height |
Remember to click the Save Changes button at the end to save your settings.
Conclusions
We sincerely hope that this article has shown you how to adjust the block's width and height in WordPress.
If you enjoyed this article, please join our Telegram Group and subscribe to our YouTube Channel for video tutorials on WordPress and Blogger. Additionally, you may follow me on Facebook, Instagram, and Twitter.
