How to apply a code to a specific multicolumn section in Dawn Theme?

Store Design
,
1

Hi everyone!

I use Dawn Theme. I added multicolumn section and wanted to put heading and link directly over the image and I found solution here how to do it. But when I put the required code - it applies to all multicolumn sections that I have on my site. How can I make it work only for one particular section?
(for example I have 5 multicolumn sections on the same page, but I need this code only for 1 of them)

2

Hallo @Ksu10005

In whatever section you are making some changes, create a new class in that section and make changes in that class.

I hope this idea is helpful.

3

@harivishwakarma
How can I make it? I’m not really good at coding :sweat_smile:

For example, here is the code (I put it in Assets > section-multicolumn.css and paste this at the bottom of the file)

.multicolumn-card__image-wrapper {
	position: relative;
}
.multicolumn-list__item.center .media--adapt img {
    width: 100%;
}
.multicolumn-card__image-wrapper:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    z-index: 2;
    opacity: 0.2;
}
.multicolumn-card__info {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
.multicolumn-card__info * {
    color: #fff !important;
}
4

Hallo @Ksu10005

please send your url password in personally

5

Hi @Ksu10005 ,

Please change all code:

#shopify-section-template--17425172758822__7a5a106a-dcc9-4528-a44f-cc7cc44295c3 .multicolumn-card__image-wrapper {
	position: relative;
}
#shopify-section-template--17425172758822__7a5a106a-dcc9-4528-a44f-cc7cc44295c3 .multicolumn-list__item.center .media--adapt img {
    width: 100%;
}
#shopify-section-template--17425172758822__7a5a106a-dcc9-4528-a44f-cc7cc44295c3 .multicolumn-card__image-wrapper:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #000;
    z-index: 2;
    opacity: 0.2;
}
#shopify-section-template--17425172758822__7a5a106a-dcc9-4528-a44f-cc7cc44295c3 .multicolumn-card__info {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
#shopify-section-template--17425172758822__7a5a106a-dcc9-4528-a44f-cc7cc44295c3 .multicolumn-card__info * {
    color: #fff !important;
}
1 Like
6

@LitCommerce
Yeeees, it works, thank you!

And is it possible to make these pictures with full screen width?

7

Hi @Ksu10005 ,

Please add code:

#shopify-section-template--17425172758822__7a5a106a-dcc9-4528-a44f-cc7cc44295c3 .multicolumn-list__item {
    width: 100% !important;
    max-width: 100% !important;
}

Hope it helps!

1 Like
8

@LitCommerce Hi!
Now it displays like this (pic 1)

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-01-18 Π² 12.32.45.png
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-01-18 Π² 12.32.45.png1872Γ—1278 419 KB

But I’d like to do it like this (pic 2).

Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-01-18 Π² 12.33.32.png
Π‘Π½ΠΈΠΌΠΎΠΊ экрана 2023-01-18 Π² 12.33.32.png2880Γ—1264 1.23 MB

9

Hi @Ksu10005 ,

Please add code:

.section-template--17425172758822__7a5a106a-dcc9-4528-a44f-cc7cc44295c3-padding {
  width: 100%;
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.section-template--17425172758822__7a5a106a-dcc9-4528-a44f-cc7cc44295c3-padding .multicolumn-list {
    gap: 0 !important;
}
.section-template--17425172758822__7a5a106a-dcc9-4528-a44f-cc7cc44295c3-padding .multicolumn-card__image-wrapper {
        margin: 0 !important;
}
1 Like
10

It works! Thank you!

1 Like