Make image in my password page smaller + removing gray background

[rnogueira]

In my password page, i have an image with a transparent background above the email signup and other text. Here is the layout in the Shopify editor:

The problem is the background shows up as gray, so i need that gone and,

The image is way too big, I want just my little logo above where it says “PREPARE”

Here is how it currently looks:

See what I mean? The logo needs to be much smaller, and I want it to sit right above the “PREPARE”

Please help.

The website is civillain.co

[EBOOST]

Hi @rnogueira ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code

2. Assets/base.css
3. Add code below to end of file

@media screen and (min-width: 750px) {
	body #Banner-template--15841917108297__image_banner_8fRwJf {
		min-height: 30rem;
	}
	body #Banner-template--15841917108297__image_banner_8fRwJf .banner__media img {
		width: 50vw;
		margin: 0 auto;
		left: 50%;
		transform: translateX(-50%);
	}
}
body #Banner-template--15841917108297__image_banner_8fRwJf .banner__media {
	background: none;
}

[rnogueira]

Thank you for this. But i would like for the logo to be smaller. I am uploading a square photo, and it seems to crop out the image. I just want a small square photo to sit nicely right above where it says “PREPARE”, without much space in between. Is this something you can change to the code please?

[EBOOST]

Hi,

You can replace old code with code below:

body .password-main {
	margin: auto 0;
    flex-grow: inherit;
}
body #Banner-template--15841917108297__image_banner_8fRwJf .banner__media img {
	width: 35vw!important;
    margin: 0 auto !important;
    transform: none !important;
    position: static;
    max-width: 350px;
}
body #Banner-template--15841917108297__image_banner_8fRwJf .banner__media {
	background: none !important;
	position: static;
	margin: 0 auto;
}
body #Banner-template--15841917108297__image_banner_8fRwJf .banner__content{
	display: none;
}
body.password  #Banner-template--15841917108297__main .banner__content {
	padding: 0 1.5rem;
}
body.password  #Banner-template--15841917108297__main .banner__content  .banner__box {
	padding: 0 3.5rem;
}
@media screen and (min-width: 750px) {
	body #Banner-template--15841917108297__image_banner_8fRwJf {
		min-height: inherit !important;
	}
	
}
@media screen and (max-width: 749px) {
	body #Banner-template--15841917108297__image_banner_8fRwJf .banner__media img {
		width: 40vw !important;
	}
}