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 · Accepted solution]

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 </body> on theme.liquid
<style>
#shopify-section-template--21636163502354__image_banner_B7RaMJ .image-with-text__media img {
        transform: scale(0.7) !important;
   }
</style>

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

[BSSCommerce-B2B · Accepted solution]

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;
}

[BSSCommerce-B2B · Accepted solution]

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
}

[BSSCommerce-B2B · Accepted solution]

@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 😍

[niraj_patel · Accepted solution]

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 </body> on theme.liquid
<style>
#shopify-section-template--21636163502354__image_banner_B7RaMJ .image-with-text__media img {
        transform: scale(0.7) !important;
   }
</style>

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

[Dekanten]

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

[BSSCommerce-B2B · Accepted solution]

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]

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 · Accepted solution]

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 · Accepted solution]

@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 · Accepted solution]

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. 🙂