• adam20061

    (@adam20061)


    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&amp;w=800&amp;h=400&amp;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&amp;w=300&amp;h=400&amp;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&amp;w=300&amp;h=400&amp;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&amp;w=800&amp;h=400&amp;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&amp;w=584&amp;h=650&amp;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&amp;w=400&amp;h=450&amp;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 adjusting display: 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]

Viewing 3 replies - 1 through 3 (of 3 total)
  • saghir daska

    (@saghirdsk)

    To address the layout and sizing issues in your WordPress block editor, let’s focus on key CSS adjustments. Here’s a step-by-step solution:

    1. Expand Gallery Container Width:
    /* Remove max-width constraints on gallery container */
    .wp-block-group.hostinger-ai-gallery-1 {
        max-width: none !important;
    }
    
    /* Expand inner containers */
    .hostinger-ai-gallery-1 .alignwide {
        max-width: 1280px; /* Adjust as needed */
        margin: 0 auto;
    }
    1. Image Scaling:
    /* Make images fill their containers */
    .hostinger-ai-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
    
    /* For MetaSlider */
    .alignnormal .metaslider {
        max-width: 100% !important;
    }
    1. Layout Adjustments:
    /* Remove default spacing */
    .hostinger-ai-gallery-1 .wp-block-group {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Flex layout adjustments */
    .hostinger-ai-gallery-1 .wp-block-group[class*="alignwide"] {
        gap: 2%; /* Control spacing between images */
        flex-wrap: wrap;
    }
    1. Text Sizing:
    /* Adjust text elements */
    .hostinger-ai-title {
        font-size: 2.5rem !important;
    }
    
    .hostinger-ai-description {
        font-size: 1.25rem !important;
        max-width: 800px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    Implementation Tips:

    1. Add these styles in Appearance → Customize → Additional CSS
    2. Use browser Dev Tools (F12) to test adjustments
    3. For MetaSlider, check slider settings → ensure “Stretch” option is enabled
    4. Consider using !important only if necessary to override theme styles

    Additional Recommendations:

    • Check if your theme has a “Boxed Layout” option that might constrain widths
    • Consider using the Group block’s “Content Width” setting in block settings
    • For better image quality, ensure your source images are at least 2x the display size

    If the issue persists, please share your site URL or screenshots for more targeted adjustments.

    Thread Starter adam20061

    (@adam20061)

    I’ve implemented everything you suggested, but unfortunately, it didn’t expand the gallery view. The only noticeable change was a slight shift of the text toward the center on the main page. On my main site, adamgieraltowski.com, it’s easy to make MetaSlider or images full-screen. However, on adamgieraltowski.com/galeria, there seems to be a container restricting the site’s width.

    Thread Starter adam20061

    (@adam20061)

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.