Image with text resize image - Dawn theme

[Dekanten]

Hi

I want to resize the image smaller, its too big for the page and i hope someone have a code so we can fix this for me. Thanks in advance folks.

For the information i have two of these sections, but i will start with this on the image below. Hope we can figure something out.

Mystoreurl:

www.dekanten.no

See attached image:

[niraj_patel]

Hello @Dekanten

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

#shopify-section-template--21636163502354__image_banner_B7RaMJ .image-with-text__media img { transform: scale(0.7) !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[BSSCommerce-B2B]

Hi @Dekanten ,

Step 1. Go to Admin → Online store → Theme > Edit code

Step 2. Find the file theme.css.
Step 3. Add this code at the end of file

#shopify-section-template--21636163502354__image_with_text_FR7kPm .image-with-text__media-item--top.grid__item img {
    transform: scale(0.6)!important;
}

[Dekanten]

Thank u so much brother, this works flawless and very happy with the result, good looking site because of both of you too.

[Dekanten]

Thank u so much brother, this works flawless and very happy with the result, good looking site because of both of you too.

[Dekanten]

Hi, i think i will try to fix this section aswell, do we have something we can try out here? Its looks awful right now.

[BSSCommerce-B2B]

If you want this

here the code

#shopify-section-template--21636163502354__7d276f64-0f8b-4d45-9869-7de5bb75cdf6 .image-with-text__media {
  background: white!important;
}
#shopify-section-template--21636163502354__7d276f64-0f8b-4d45-9869-7de5bb75cdf6 .image-with-text__media img {
  transform: scale(0.7)!important
}

[Dekanten]

Hi again this works very well on my browser on my computer, when we see it on the mobile the image is cutoff.

See attached image: Thanks in advance.

[BSSCommerce-B2B]

@Dekanten ,

I think to work well both desktop and mobile you should change all the code i’ve sent to you like this

@media only screen and (min-width: 768px) {
   .image-with-text__media img{
		transform: scale(0.7) !important;
		background: white !important;
	}
}
@media only screen and (max-width: 767px) {
    .image-with-text__media img{
        object-fit: contain!important;
    }
}

Mobile

Desktop

If it helps you, please like and mark it as the solution.

Best Regards

[Dekanten]

You are a real miracle man and this works so well im so glad to see these results, working like a charm. Can we hope for something more? NO. This is the help i need for these sections.

One more thing. Can we make my logo bigger on mobile devices?

See attached image: (Its looks so small and thin)

[BSSCommerce-B2B]

Oh, it easy bro,
Please change the code i’ve sent

to

@media only screen and (min-width: 768px) {
	.image-with-text__media img {
		transform: scale(0.7) !important;
		background: white !important;
	}
}
@media only screen and (max-width: 767px) {
	.image-with-text__media img {
		object-fit: contain !important;
	}
	.header__heading {
		transform: scale(1.4) !important;
	}
}

Result

[Dekanten]

Hi again

The last thing for today, i want make these sections better looking, its looks kinda weird dont you think?

Do you have an brilliant idea for me? What will fit this sections, its looking to open for me and there is white field around it. Maybe some lines or something?

See attached image:

[BSSCommerce-B2B]

Do you want to add a right border like this?

[BSSCommerce-B2B]

If so, find the code i mark here and remove it

And add this code

@media only screen and (min-width: 990px) {
	.image-with-text__media-item > .image-with-text__media {
		background: linear-gradient(to bottom, transparent 15%, #ccc 15%, #ccc 15%, transparent 15%) !important;
		background-size: 1px 100% !important;
		background-position: right center !important;
		background-repeat: no-repeat !important;
	}
}

[Dekanten]

I moved some sections instead to make it better so im happy with everything, thank u very much indeed for everthing you have done for me. Today have i done some good upgrades and thanks to you.

Just wondering i use a wishlist app, this have no options to have it on the product collections, Is it possible to add heart icon on them with a css or something?

See attached image: (Want a heart icon on the top right side of the image, possible?)

[BSSCommerce-B2B]

@Dekanten , Which app are you using? I believe it should have this feature available. If it doesn’t, I recommend contacting the app’s support team to customize it for you, ensuring it works seamlessly with your app. I can add the icon using CSS, but it won’t integrate with your app’s functionality.

[Dekanten]

Swishlist is the app im using at the moment, and thats true there is no product code for this. Quite strange aswell but i liked the design and everything about it. I could ask the author of the app of this and hear whats the deal here though. It should be integrated but its not, i will take this case further with the man behind it now.