Aligment of picture and text on the same level in a "picture and text"-element

Store Design
1

Dear Shopify Community,

I’m using some “picture with text”-elements on my shopify site (Dawn Theme). In the settings I chose “overlapping” of picture and text since I want the pictures to be displayed with a fix size (the option “no overlapping” results in a zoom of the pictures to adapt the picture height to the length of the corresponding text).

However, so far I was not able to align the top of the picture and the first line of the text horizontally on the same level. Is there somebody who can provide a code that performs such an alignment?

I have further “picture with text”-elements on other sites with the setting “no overlapping”. These elements need to stay as they are and shouldn’t be influenced by the code.

Here is the page I want to change: https://my-eloo.de/pages/vorteile

Below you find a screenshot of this page that shows the upper end of the picture and the beginning of the text I want to have on the same height.

Thank you so much! :slightly_smiling_face:

grafik.png
grafik.png1521×628 77.6 KB

2

The issue here is that with the overlapping option enabled in Dawn’s Picture with Text section, the image and text are no longer aligned at the top. This can make the layout appear unbalanced.

You can fix this by using custom CSS to force both the image and text to align at the top. Just make sure to add a unique class (like section-id-vorteile) to the section you want to affect, and then target it in your CSS like this:

.section-id-vorteile .media–adapt {
align-items: flex-start !important;
display: flex !important;
}

.section-id-vorteile .media__content,
.section-id-vorteile .media__text {
margin-top: 0 !important;
align-self: flex-start !important;
}

This approach aligns the picture and text without affecting your other sections with “no overlapping” enabled. Like this as solutions if it helps

3

Hello @Frede ,

I hope you’re doing well!

You can fix this in 20 seconds:

  1. From your Shopify Admin go to: online store > themes > three dots > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
[id*='ImageWithText']{
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.image-with-text__text-item{
    padding-top: 0 !important;
}

If it helps you please click on the “like” button and mark this answer as a solution.

Thank you.

Kind regards,
Diego

4

Thank you very much! This code leads to the wanted result but it also affects the “picture and text”-elements on my side that I do not want to affect with it. How can I specifically affect only the elements on one singe page (https://my-eloo.de/pages/vorteile)?

5

Thank you very much. That sounds like a good solution but unfortunately I do not know where I have to add the code. Can you give me a brief instruction where I have to copy it to? Thank you!

6

Hello again! I wasn’t able to solve this issue so far. I have add an if-statement to the code diego_ezfy posted but the code still affects all pages. Is there anybody who can tell me how I can fix this if-statement in a way that the code only affects the “picture and text”-elements on one specific page: (https://my-eloo.de/pages/vorteile)?

This is what I have add to the end of my base.css:

{% if page.url == "/pages/vorteile" %}
[id*='ImageWithText']{
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.image-with-text__text-item{
    padding-top: 0 !important;
}
{% endif %}
7

I was finally able to solve the issue. I copied the code provided by @diego_ezfy to the field “custom css” of every “picture and text”-element I wanted to affect directly in the customizer. That’s it… :slightly_smiling_face: