How to align the pictures in section "Image with text" along the middle line of Yuva?

[OneChefOn]

Picture 1 is what I want, and Picture 2 is the current. Here is my store URL if needed. https://5c252b-bc.myshopify.com

[BiDeal-Discount]

Hi @OneChefOn

let try add this custom css:

.image-position-right .text-content {
  text-align: right;
}

result:

[OneChefOn]

I did it but nothing changed. Also, I want to do it by changing this section once, instead of changing the code every time I add this section.

[BiDeal-Discount]

where did you added that code?
I checked on storefront source and don’t see that code was applied

[OneChefOn]

Sorry, I deleted it after adding it and found that it didn’t change. I can take a screenshot to show you where it wa s added.

[BiDeal-Discount]

Please add it again to let me check why is it not working

[OneChefOn]

Ok, I added it back.

[BiDeal-Discount]

I see it is working

[BiDeal-Discount]

to make it work for all section like that, you have to add that custom CSS to Theme Settings

[OneChefOn]

Sorry, I may not have expressed it clearly. What I want is that the image is aligned to the middle line of the entire screen, so that after adding multiple Image with text Sections, the images are just connected.

[BiDeal-Discount]

Oh sorry my failure.

Let try this one:

.shopify-section.image-with-text-section .align-items-center .col-md-6:first-of-type {
  padding-right: 0;
}
.shopify-section.image-with-text-section .align-items-center .col-md-6:last-of-type {
  padding-left: 0;
}

to reduce the vertical spacing, you can configure each section:

[tim_1]

First, you need to make padding/spacing between these two sections zero.

Second, paste this into both sections “Custom CSS” setting:

@media (min-width:768px){
  .row {
    align-items: stretch;
  }

  .row > div {
    padding-left: 0;
    padding-right: 0;
  }

  .yv-imgbox-container,
  .yv-img-content {
    height: 100%;
  }
  .text-content { /* also this, if need padding between text and image above */
    padding-top: 25px;
  }
}

[OneChefOn]

I did and it worked. But I can not save it.

[OneChefOn]

I did and it worked. But I can not save it.

[OneChefOn]

Sorry, I replied to the wrong person.

[OneChefOn]

In addition, if I want to keep the original Section unchanged and have the background color of the text section the same width as the picture, as shown in the figure below, how can I change the code to achieve this?

[BiDeal-Discount]

if you can’t save it, let try to go to edit theme code, find file assets/theme.min.css then add the code to the end of that file

[BiDeal-Discount]

can you figure out it with a bigger picture? I haven’t catched it

[OneChefOn]

Sorry, or you can see this website https://madeincookware.com/

[BiDeal-Discount]

Oh okay. Please remove the code I suggest previous and replace by the code below:

@media (min-width: 768px) {
  .shopify-section.image-with-text-section .align-items-center {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
  }

  .shopify-section.image-with-text-section .align-items-center > .col-md-6 {
    width: 100%;
    max-width: 100%;
  }

  .shopify-section.image-with-text-section .align-items-center.image-position-right > .col-md-6:first-of-type,
  .shopify-section.image-with-text-section .align-items-center.image-position-left > .col-md-6:last-of-type {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--secondaryColorBody);
    align-self: stretch;
  }
}

this code will applied for desktop only.