Dawn How to change the height for small image inside image with text section

Store Design
1

Hi, Section Image with text. I have selected small image, and it is still too height. How to change it? Thks

https://cbdskincarehk.myshopify.com/

PW: fleude

1 Like
2

@San21 please share store password to access and check!

3

@San21 use this

.image-with-text__media.image-with-text__media–adapt.media

{

height:70%;

}

4

please do this

@San21

.image-with-text__media.image-with-text__media–adapt.media

{

height:63%;

}

5

@San21

can you please share issue images?

6

hello @San21

can you please share which page want to change the height for a small image inside the image with a text section

7

Thank you for your time, to be honest, it is for the entire shop, so every time I use the section Image with text and select small - the image is always too big.

Both section in homepage - and About page.

Thank you.

1 Like
8

yes @San21 you can do it by giving height:63%;

I hope this will help!

9

@San21

can you please provide issue images?

10

hi, sorry not sure where to change it, in component-image with text or bass.css. Also in both files I tried to play with different height, but I don’t know which section exactly

In component I have those 2 sections I tried. Thk you

.image-with-text__media–small {
height: 10.4rem;
}

or

@media screen and (min-width: 750px) {
.image-with-text__media–small {
height: 31.4rem;
}

11

@San21 have you tried class i mentioned above in theme.scss.liquid

12

@Ecommpremium I am using Dawn, so no theme.scss

In my component-image-with-text.css

.image-with-text {
margin-top: 5rem;
}

.image-with-text:not(.color-scheme-background-1) {
margin-bottom: 5rem;
}

@media screen and (min-width: 750px) {
.image-with-text {
margin-bottom: calc(5rem + var(–page-width-margin));
}
}

.image-with-text .grid {
margin-left: 0;
margin-bottom: 0;
}

.image-with-text__grid {
overflow: hidden;
}

@media screen and (min-width: 750px) {
.image-with-text__grid–reverse {
flex-direction: row-reverse;
}
}

.image-with-text__media {
background-color: transparent;
min-height: 100%;
}

.image-with-text__media–small {
height: 10.4rem;
}

.image-with-text__media–large {
height: 43.5rem;
}

@media screen and (min-width: 750px) {
.image-with-text__media–small {
height: 31.4rem;
}

.image-with-text__media–large {
height: 69.5rem;
}
}

.image-with-text__media–placeholder {
background-color: rgba(var(–color-foreground), 0.04);
position: relative;
overflow: hidden;
}

.image-with-text__media–placeholder.image-with-text__media–adapt {
height: 20rem;
}

@media screen and (min-width: 750px) {
.image-with-text__media–placeholder.image-with-text__media–adapt {
height: 30rem;
}
}

.image-with-text__media–placeholder > svg {
position: absolute;
left: 50%;
max-width: 80rem;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
fill: currentColor;
}

.image-with-text__content {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 100%;
justify-content: center;
padding: 4rem 4rem 5rem;
}

@media screen and (min-width: 750px) {
.image-with-text__grid–reverse .image-with-text__content {
margin-left: auto;
}
}

@media screen and (min-width: 990px) {
.image-with-text__content {
padding: 6rem 7rem 7rem;
}
}

.image-with-text__content > * + * {
margin-top: 2rem;
}

.image-with-text__content > .image-with-text__text:empty ~ a {
margin-top: 2rem;
}

.image-with-text__content > :first-child:is(.image-with-text__heading) {
margin-top: 0;
}

.image-with-text__content :last-child:is(.image-with-text__heading) {
margin-bottom: 0;
}

.image-with-text__content .button + .image-with-text__text {
margin-top: 2rem;
}

.image-with-text__content .image-with-text__text + .button {
margin-top: 3rem;
}

.image-with-text__heading {
margin-bottom: 0;
}

.image-with-text__text p {
margin-top: 0;
margin-bottom: 1rem;
}

13

Put it in base.css and try please @San21

14

@Ecommpremium Thank you

15

You are welcome! @San21