How can I align images and text side by side in the Venue theme?

Store Design
, ,
1

Creating a new page, hoping to put picture on left and text directly to the right, using the venue theme. I selected “Wrap Text Around Image” but both the picture and the text are centered with a very narrow page border. I would like the content to take up all white space if possible, stretching from edge to edge of desktop screen.

2

To achieve a layout with an image on the left and text directly to the right, taking up the full width of the screen, you can follow these steps:

  1. Create a new page in your Shopify admin panel.

  2. On the page editor, locate the section or content block where you want to add the image and text.

  3. Insert an image element into the section and upload/select the desired image.

  4. Add a text element next to the image. You can either use a rich text editor or a text block, depending on the options provided by your theme.

  5. Customize the layout and styling by adding custom CSS code. Here’s an example that should help achieve the desired layout:

/* Adjust the layout and spacing */
.page-wrapper {
  display: flex;
  align-items: flex-start; /* Align items to the top */
}

.image-wrapper {
  flex: 0 0 auto; /* Prevent image from stretching */
  margin-right: 20px; /* Adjust the spacing between image and text */
}

.text-wrapper {
  flex: 1 1 auto; /* Allow text to grow and fill available space */
}

/* Stretch the content to the edges of the screen */
.page-container {
  max-width: 100%;
  padding: 0;
}

/* Remove the narrow page border */
.page-wrapper {
  margin: 0;
  padding: 0;
  border: none;
}
3

Where would this code be placed? I am not having much luck getting it to work