How can I adjust text position to the second image in the image banner section on Dawn?

[TheRitualThief]

Currently my image banner looks like this. The text overflows to the first image.

I would like to make it stay (and be device-responsive) only with the second image


link to theme and page in question: https://admin.shopify.com/store/veganproteinpowder/themes/142169473173/editor?previewPath=%2Fpages%2...

password is pass: pass

thank you in advance!

[rajweb]

Hey @TheRitualThief ,

To make your text stay only within the second image and be responsive across devices, you can try adjusting the CSS for the container holding the text.

Follow these steps:

1. Wrap the Text: Make sure the text is in a container that’s separate from the image elements. You can use Flexbox or Grid for better control of positioning.

2. Use Flexbox or Grid: Set up a layout where each image and text container has specific column behavior.

3. CSS Media Queries: Adjust the layout based on screen width to ensure responsiveness.

Here's an example of how you could structure the HTML and CSS:

<div class="image-banner">
  <div class="image image-one">
    <!-- First image here -->
  </div>
  <div class="text-container">
    <h2>Introduce Yourself to Them</h2>
    <p>Your text content goes here. Make sure to keep it concise and engaging.</p>
  </div>
  <div class="image image-two">
    <!-- Second image here -->
  </div>
</div>

CSS:

.image-banner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

.image {
  background-size: cover;
  background-position: center;
  height: 100%;
}

.image-one {
  /* Background image for the first section */
  background-image: url('path-to-your-first-image.jpg');
}

.image-two {
  /* Background image for the second section */
  background-image: url('path-to-your-second-image.jpg');
}

.text-container {
  padding: 20px;
  color: white;
  background-color: #333; /* Or whatever background you need */
}

@media (max-width: 768px) {
  .image-banner {
    grid-template-columns: 1fr;
  }

  .image, .text-container {
    width: 100%;
    height: auto;
  }
}

This CSS should ensure that the text stays within the middle column and adjusts to screen size changes. Let me know if this setup aligns with your theme structure, and I can help fine-tune further if needed!

If I was able to help you, please don't forget to Like and mark it as the Solution!

Best  Regard,

Rajat Sharma

[TheRitualThief]

Hi Rajat,

Thanks for the quick reply. 

I'm a bit new to this. Can you please add instructions where in the code I should add these?

[rajweb]

Certainly! Here’s how you can implement these changes in your Shopify theme:

1. Identify the Right Template File:

Since you’re customizing a page banner, you’ll typically find this code in the theme files, usually in a page.liquid file or possibly a custom section file if it’s a reusable section in your Shopify theme.

2. Follow these steps;

1. Online Store > Themes > Edit Code

2. Look for a file like page.liquid under Templates or check Section  for a section that might be controlling this part of the page (e.g., banner.liquid or  image-banner.liquid).

3. Add HTML Structure: Find the section of the code where your images and text are located. Replace or adjust it with the following HTML structure to create the layout. You might need to wrap existing code with this structure if it’s already there:

<div class="image-banner">
  <div class="image image-one">
    <!-- Place first image here, such as with an <img> tag or background image in CSS -->
  </div>
  <div class="text-container">
    <h2>Introduce Yourself to Them</h2>
    <p>Your text content goes here. Make sure to keep it concise and engaging.</p>
  </div>
  <div class="image image-two">
    <!-- Place second image here, such as with an <img> tag or background image in CSS -->
  </div>
</div>

3. Add CSS Styles:

: After adding the HTML structure, add the CSS to style it. You can add CSS in a few places:

- Theme.scss.liquid or theme.css.liquid: If your theme has a main CSS file, it’s usually named something like theme.scss.liquid or theme.css.liquid.

-Section-specific CSS: If your theme uses inline styles within sections, you might see a <style> block directly in the section.liquid file where you can add this code.

Add this CSS code to your main CSS file (or a specific section's style if that’s where you’re editing):

.image-banner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

.image {
  background-size: cover;
  background-position: center;
  height: 100%;
}

.image-one {
  /* Set the first image as background */
  background-image: url('path-to-your-first-image.jpg');
}

.image-two {
  /* Set the second image as background */
  background-image: url('path-to-your-second-image.jpg');
}

.text-container {
  padding: 20px;
  color: white;
  background-color: #333; /* Adjust as needed */
}

@media (max-width: 768px) {
  .image-banner {
    grid-template-columns: 1fr;
  }

  .image, .text-container {
    width: 100%;
    height: auto;
  }
}

Replace 'path-to-your-first-image.jpg' and 'path-to-your-second-image.jpg' with the actual URLs or Shopify asset references for your images. You can upload images to Setting > Files in Shopify or use existing theme images.

Save the changes in your theme editor.

This should help you set up a responsive layout where the text stays within the middle section, even on mobile. Let me know if you need further clarification!

thanks

[TheRitualThief]

Thank you for the follow up Rajat! 💕

There multiple image banner sections that I have added...

The code you provide seems to be specific for this one image banner. If I modify the liquid file with it - it seems it will affect all the others, is that correct?

Is there a more general way I can hardcode that the left alignment and the right alignments should stay in the containers holding the images? But the center-alignment can spread across the two?

Apologies for this, I'm not a FED and I realize my question might be more complex than anticipated!!

[rajweb]

No worries at all! This is actually a common scenario in theme customization, and I can guide you to create a more flexible approach that targets only the specific layout you want, without affecting other banners.

Approach:

Instead of modifying all banners, we’ll create a specific class for the banner you want to style differently. This way, you’ll be able to apply the layout changes only where you need them.

Steps:

1. Assign a Unique Class to the Target Banner Section:In the relevant Liquid file (e.g., page.liquid or the specific section.liquid  where you’re defining this banner), wrap the HTML code in a "div" with a unique class, like "image-banner-special":

<div class="image-banner-special">
  <div class="image image-one">
    <!-- Image for left alignment here -->
  </div>
  <div class="text-container">
    <h2>Introduce Yourself to Them</h2>
    <p>Your text content goes here. This text will stay in the center and responsive.</p>
  </div>
  <div class="image image-two">
    <!-- Image for right alignment here -->
  </div>
</div>

2. Add Specific CSS for This Banner Layout:

In your main CSS file (like theme.scss.liquid or theme.css.liquid), target only the "image-banner-special" class, so these styles will only apply to the specific banner you want to modify:

.image-banner-special {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
}

/* Styles for left and right images */
.image-banner-special .image {
  background-size: cover;
  background-position: center;
  height: 100%;
}

/* Center text container */
.image-banner-special .text-container {
  padding: 20px;
  color: white;
  background-color: #333; /* Adjust to fit your theme */
}

/* Make layout responsive */
@media (max-width: 768px) {
  .image-banner-special {
    grid-template-columns: 1fr;
  }

  .image-banner-special .image,
  .image-banner-special .text-container {
    width: 100%;
    height: auto;
  }
}

This approach should allow you to control exactly which banner sections are styled and ensure that they don’t affect other banners in your theme.

thanks

[TheRitualThief]

Hey Rajat, 

Thank you for your comment. I'm pasting the code in image-banner.liquid & base.css. Unfortunately, it's not working.

I saw someone included the theme ID & the section Code for a different modification to a specific section. 

I'll copy/paste the exact link to section in question: https://admin.shopify.com/store/veganproteinpowder/themes/142169473173/editor?previewPath=%2Fpages%2...

the pass is "pass"