Image

Store Design
, ,
1

Hi everyone,

I’m trying to display two images inside a section so that they fill the entire screen. Right now, they are in a gallery, but they don’t take up the full width and height of the viewport.

I want each image to take up half the screen (side by side) and fully cover the available space. I’m using CSS, but I’m not sure if Flexbox or Grid is the best approach.

Would this be the best way to achieve a full-screen image layout, or is there a better approach in Shopify’s Liquid/CSS setup?

Thanks in advance for your help! :blush:

This is what I want just below :

DraegerParis_3-1742902035056.png
DraegerParis_3-1742902035056.png2751×1255 355 KB

My website : https://www.draegerparis.com/

2

Hello @Draeger-Paris

Please follow the steps below after logging into the Shopify admin:

  • Go to your Shopify Admin panel.

  • Click on Online Store > Themes.

  • Find the theme you want to edit and then click Actions > Edit code.

  • Search main.css

  • Insert the provided CSS code at the end of the file and save the changes.

@media (min-width: 769px)
{
    .cc-gallery .container
    {
        max-width: 100%;
        padding: 0;
    }
    .cc-gallery .container .gallery.grid 
    {
        gap: 0;
    }
    #template--20104545468740__media_grid_xjB3Cp .gallery-block.row-span-2
    {
        Min-height:100vh !important;
    }
}

Please hit Like and Mark it as a Solution if you find our reply helpful.

3

Hey @Draeger-Paris ,

We’ve created a similar layout recently for our client, it was basically a hero section comprising of two separate images on either side with different titles and buttons on both of them.

I’m not able to copy the code here, but would love to share it with you. Please send a “hello” at the email below and we’ll share the section.

Cheers!
Shubham | Untechnickle

4

Thank you @WebDeskSolution

Can you help me to do the same css, but for a shopify “media with text” section in the theme.
I need the image and the text in the image below to fill the screen.

DraegerParis_0-1742910607756.png
DraegerParis_0-1742910607756.png2705×1399 305 KB

5

Hello @Draeger-Paris

Sure! Please add the Media with Text section to your live theme and share the URL with us. We will check it and provide the necessary CSS to ensure the image and text fill the screen properly.