Expanding Image and Text Area in WordPress
-
Hi everyone,
I’m working on a WordPress site and I’m having trouble adjusting the size of images and text on my pages. Right now, the images appear too small, and there’s a lot of unused space around them. I’d like to make the gallery section wider so that the images and text have more room to breathe.
I’m using a block-based editor, and the gallery is wrapped inside a
.wp-block-group.alignfull
container. Additionally, I have a MetaSlider, which is also affected by the layout limitations. However, in editor everything appears to be bigger.Here’s the code I’m using on this page:
<!-- wp:group {"align":"full","className":"hostinger-ai-gallery-1 hostinger-ai-fade-up","layout":{"type":"default"}} -->
<div class="wp-block-group alignfull hostinger-ai-gallery-1 hostinger-ai-fade-up"><!-- wp:group {"align":"full","className":"hostinger-ai-fade-up","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hostinger-ai-fade-up" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:heading {"textAlign":"center","className":"hostinger-ai-title","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20","left":"0","right":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|light"}}}},"textColor":"light","fontSize":"x-large"} -->
<h2 class="wp-block-heading has-text-align-center hostinger-ai-title has-light-color has-text-color has-link-color has-x-large-font-size" style="margin-top:0;margin-right:0;margin-bottom:var(--wp--preset--spacing--20);margin-left:0">Galeria Fotografii</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","className":"hostinger-ai-description","style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"elements":{"link":{"color":{"text":"var:preset|color|light"}}}},"textColor":"light","fontSize":"medium"} -->
<p class="has-text-align-center hostinger-ai-description has-light-color has-text-color has-link-color has-medium-font-size" style="margin-top:0;margin-bottom:0">Odkryj nasze wyj?tkowe obrazy i produkty fotograficzne w minimalistycznym stylu.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:metaslider/slider {"slideshowId":732} -->
<div class="alignnormal">[metaslider id="732"]</div>
<!-- /wp:metaslider/slider -->
<!-- wp:group {"className":"hostinger-ai-fade-up","layout":{"type":"constrained"}} -->
<div class="wp-block-group hostinger-ai-fade-up"><!-- wp:group {"align":"full","className":"alignwide hostinger-ai-fade-up","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group alignfull alignwide hostinger-ai-fade-up"><!-- wp:image {"id":503,"sizeSlug":"full","linkDestination":"none","className":"hostinger-ai-image hostinger-index-2","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border hostinger-ai-image hostinger-index-2"><img src="https://images.unsplash.com/photo-1647884440187-574c6c77c7e7?q=85&w=800&h=400&fit=crop" alt="" class="wp-image-503" style="border-radius:8px"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":504,"sizeSlug":"full","linkDestination":"none","className":"hostinger-ai-image hostinger-index-3","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border hostinger-ai-image hostinger-index-3"><img src="https://images.unsplash.com/photo-1609814634675-51ff11599922?q=85&w=300&h=400&fit=crop" alt="" class="wp-image-504" style="border-radius:8px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"full","className":"alignwide hostinger-ai-fade-up","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
<div class="wp-block-group alignfull alignwide hostinger-ai-fade-up" style="margin-bottom:var(--wp--preset--spacing--20)"><!-- wp:image {"id":504,"sizeSlug":"full","linkDestination":"none","className":"hostinger-ai-image","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border hostinger-ai-image"><img src="https://images.unsplash.com/photo-1593421986221-661584df8820?q=85&w=300&h=400&fit=crop" alt="" class="wp-image-504" style="border-radius:8px"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":503,"sizeSlug":"full","linkDestination":"none","className":"hostinger-ai-image hostinger-index-1","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border hostinger-ai-image hostinger-index-1"><img src="https://images.unsplash.com/photo-1692726502700-1f98e3bbe784?q=85&w=800&h=400&fit=crop" alt="" class="wp-image-503" style="border-radius:8px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"full","className":"hostinger-ai-resume-1 hostinger-ai-fade-up","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hostinger-ai-resume-1 hostinger-ai-fade-up"><!-- wp:group {"align":"wide","className":"hostinger-ai-fade-up","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"grid","columnCount":2,"minimumColumnWidth":null}} -->
<div class="wp-block-group alignwide hostinger-ai-fade-up" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:group {"className":"hostinger-ai-fade-up","layout":{"type":"constrained"}} -->
<div class="wp-block-group hostinger-ai-fade-up"><!-- wp:image {"id":18,"sizeSlug":"full","linkDestination":"none","className":"hostinger-ai-image","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image size-full has-custom-border hostinger-ai-image"><img src="https://images.unsplash.com/photo-1601490702107-f101b2eaaf87?q=85&w=584&h=650&fit=crop" alt="" class="wp-image-18" style="border-radius:8px"/></figure>
<!-- /wp:image --></div>
<!-- /wp:group -->
<!-- wp:group {"className":"hostinger-ai-fade-up","style":{"spacing":{"blockGap":"0px","padding":{"right":"var:preset|spacing|60","left":"var:preset|spacing|60"}},"layout":{"columnSpan":1,"rowSpan":1}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group hostinger-ai-fade-up" style="padding-right:var(--wp--preset--spacing--60);padding-left:var(--wp--preset--spacing--60)"><!-- wp:heading {"className":"hostinger-ai-title","style":{"elements":{"link":{"color":{"text":"var:preset|color|dark"}}},"spacing":{"margin":{"bottom":"var:preset|spacing|20"}}},"textColor":"dark","fontSize":"x-large"} -->
<h2 class="wp-block-heading hostinger-ai-title has-dark-color has-text-color has-link-color has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--20)">Moje zdj?cia</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"hostinger-ai-description","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|70"}},"elements":{"link":{"color":{"text":"var:preset|color|dark"}}}},"textColor":"dark","fontSize":"medium"} -->
<p class="hostinger-ai-description has-dark-color has-text-color has-link-color has-medium-font-size" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--70)">Oferuj? szeroki wybór produktów fotograficznych, w tym obrazy, kalendarze oraz kursy online, które odzwierciedlaj? moj? pasj? do fotografii krajobrazowej.</p>
<!-- /wp:paragraph -->
<!-- wp:heading {"className":"hostinger-ai-title hostinger-index-1","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|30"}}},"fontSize":"x-large"} -->
<h2 class="wp-block-heading hostinger-ai-title hostinger-index-1 has-x-large-font-size" style="margin-bottom:var(--wp--preset--spacing--30)">Portfolio</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"className":"hostinger-ai-subtitle hostinger-index-1 hostinger-ai-font-bold"} -->
<p class="hostinger-ai-subtitle hostinger-index-1 hostinger-ai-font-bold">Zobacz moje prace</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"hostinger-ai-description hostinger-index-1","style":{"spacing":{"margin":{"bottom":"var:preset|spacing|50"}}}} -->
<p class="hostinger-ai-description hostinger-index-1" style="margin-bottom:var(--wp--preset--spacing--50)">Przegl?daj moje najlepsze zdj?cia i projekty, które pokazuj? moj? wizj?.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"hostinger-ai-subtitle hostinger-index-2 hostinger-ai-font-bold"} -->
<p class="hostinger-ai-subtitle hostinger-index-2 hostinger-ai-font-bold">Us?ugi</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"hostinger-ai-subtitle hostinger-index-2"} -->
<p class="hostinger-ai-subtitle hostinger-index-2">Us?ugi</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
<!-- wp:group {"align":"full","className":"hostinger-ai-customer-reviews-2 hostinger-ai-fade-up","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"backgroundColor":"color2","layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull hostinger-ai-customer-reviews-2 hostinger-ai-fade-up has-color-2-background-color has-background" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)"><!-- wp:columns {"className":"alignfull"} -->
<div class="wp-block-columns is-not-stacked-on-mobile alignfull"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:image {"id":715,"width":"412px","height":"auto","sizeSlug":"full","linkDestination":"none","align":"center","className":"hostinger-ai-testimonial-image hostinger-index-2","style":{"border":{"radius":"8px"}}} -->
<figure class="wp-block-image aligncenter size-full is-resized has-custom-border hostinger-ai-testimonial-image hostinger-index-2"><img src="https://images.unsplash.com/photo-1640738960969-c50af172f4a1?q=85&w=400&h=450&fit=crop" alt="" class="wp-image-715" style="border-radius:8px;width:412px;height:auto"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:group {"className":"hostinger-ai-fade-up","style":{"spacing":{"blockGap":"0px","padding":{"right":"0","left":"0"}},"layout":{"columnSpan":1,"rowSpan":1}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"left","flexWrap":"nowrap","verticalAlignment":"center"}} -->
<div class="wp-block-group hostinger-ai-fade-up" style="padding-right:0;padding-left:0"><!-- wp:paragraph {"className":"hostinger-ai-subtitle","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|20"}},"elements":{"link":{"color":{"text":"var:preset|color|light"}}}},"textColor":"light","fontSize":"medium"} -->
<p class="hostinger-ai-subtitle has-light-color has-text-color has-link-color has-medium-font-size" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--20)">Opinie klientów</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"className":"hostinger-ai-testimonial-text hostinger-ai-font-bold hostinger-index-2","style":{"spacing":{"margin":{"top":"0","bottom":"var:preset|spacing|50"}},"elements":{"link":{"color":{"text":"var:preset|color|light"}}},"typography":{"fontSize":"21px"}},"textColor":"light"} -->
<p class="hostinger-ai-testimonial-text hostinger-ai-font-bold hostinger-index-2 has-light-color has-text-color has-link-color" style="margin-top:0;margin-bottom:var(--wp--preset--spacing--50);font-size:21px">”Korzysta?em z us?ug Adam Gieraltowski Photography i jestem zachwycony jako?ci? zdj?? oraz profesjonalizmem. Zdecydowanie polecam ka?demu, kto szuka wyj?tkowych produktów.”</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->I’ve tried modifying CSS, such as increasing
max-width
and adjustingdisplay: flex
, but the changes don’t seem to have the desired effect. Any suggestions on how I can expand the available space for the gallery and improve image scaling?Thanks in advance for your help!
The page I need help with: [log in to see the link]
- You must be logged in to reply to this topic.