Banner size and image size theme dawn

[MaBa]

Hi,

i have changed the banner size of the slideshow section but when i upload my image, it doesn’t get resized but is it just cut. Any suggestion?

[shahzad5]

You will have to resize every nested div including image.

[MaBa]

I added to base.css the following code:

slideshow-component .slideshow.banner {
height: 600px !important;
width: 900px !important
}

what else should I add?

[shahzad5]

Could you please share the url?

[MaBa]

https://571d01.myshopify.com/
pwd:siahaw

[shahzad5]

You are referring to this home banner right?

If yes, then you are using the wrong image. The image ratio should be same as the banner width and height if you want to show it correctly.

[MaBa]

I’m referring to this slideshow:

and the original image size is 608X501. I would like to keep the ratio

[shahzad5]

Please explain what you want in detail so I can give you better solution.

Right now your slideshow section rendered size is 1172 × 560 px and you are fitting 608X501px image in it which will definitely crop the image.

[MaBa]

yes, right.

What I trying to achieve is the following:

which is an image aligned on the right (or on the left) and a text over it. I am trying all available sections in the Dawn theme but I don’t know how to do it.

I don’t want the image to be cut off but I would like to understand how the image can be resized without cutting it off.

Hope I managed to make myself clear

[shahzad5]

Okay, For the image you want to align on left or right, you can you this code snippet anywhere in base.css file

#Slider-template–15942264946878__f214d17a-7807-444b-9195-03bc52c2241d .slideshow__media img{

padding-left:600px; //If you want to align image on left, use padding-right.

height:600px;

}

The above will align your image.

Now for aligning text on left or right use this code snippet

#Slider-template–15942264946878__f214d17a-7807-444b-9195-03bc52c2241d .banner__heading{

padding-right:500px;

}

If the code doesn’t work. Use !important with every css like this e.g height:600px !important;

Hope it will solve your problem

[MaBa]

Thanks a lot. We are getting closer

There a re 2 problems now:

• desktop version: how can i set the background color? now it is now white anymore

• mobile version: the image is disappeared

[shahzad5]

For the background color on desktop, use the following

#Slider-template–15942264946878__f214d17a-7807-444b-9195-03bc52c2241d .slideshow__slide{

background-color:black; //use the color of your choice.

}

For the mobile version you will need to the following code.

@media(max-width:575px){

#Slider-template–15942264946878__f214d17a-7807-444b-9195-03bc52c2241d{

height:500px;

}

#Slider-template–15942264946878__f214d17a-7807-444b-9195-03bc52c2241d img{

padding-left:0px;

height:500px;

}

}

[MaBa]

If i select black (or red…), the color changes but if I select white (which I need) the background is the same as before.

In the mobile version the image still disappears:

[shahzad5]

For background color use this code snippet

#Slider-template–15942264946878__f214d17a-7807-444b-9195-03bc52c2241d .media{

background-color:none;

}

and, for the img on mobile please use !important like this with padding-left

{padding-left:0px !important;}

[MaBa]

still the same

[shahzad5]

which part didn’t work?

[MaBa]

I dont manage to change the color to white

[shahzad5]

use

background:none!important;

[MaBa]

Thanksssssss it finally worked!

now the only problem left is on the mobile vesrion where i don’t want the padding, i want the full image to be visible:

[shahzad5]

Use !important; with padding-left and also with height for mobile. Also increase height from 500px t0 600 because text is going out of the box.

If I have answered your questions please accept my reply as a solution and like my replies.

Thanks