Want my product pics to bleed to the edge

[rene94]

Hey guys, could you help with making my product page similar too mine: https://ed700c-8f.myshopify.com/products/bler-riot-sunfaded-embroidered-vintage-dickies-t-shirt

password is: yautwu

inspo: https://www.phoebephilo.com/en_gb/shrunk-bomber-black-leather

[EBOOST]

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: 990px) {
    [id^="MainProduct-template"] .product {
        border: none;
        display: flex;
        flex-flow: column-reverse;
        margin-top: -111px;
    }
    [id^="MainProduct-template"]  .product--large:not(.product--no-media) .product__media-wrapper {
        max-width: none;
        width: 100%;
    }
    [id^="MainProduct-template"]  .product--right .product__media-list {
        display: flex;
          flex-flow: wrap;
    }
    [id^="MainProduct-template"]  .product--stacked .product__media-item {
        width: 50% !important;
    }
    [id^="MainProduct-template"]  .product--large:not(.product--no-media).product--right .product__info-wrapper {
        margin: 0 auto;
        padding: 4rem 0;
    }
    [id^="MainProduct-template"]  .product-form__buttons {
        max-width: none;
    }
}

[rene94]

wow that looks exactly how I want if I add more pictures will they fill the bottom of the screen?

[rene94]

Hi I tried ot, but it ended up looking like this: https://bt6lqbvnzlx9m77b-74826613002.shopifypreview.com

[EBOOST]

Hi,

Yes, It will. You can update code below to full width

@media screen and (min-width: 990px) {
    [id^="MainProduct-template"] .product {
        border: none;
        display: flex;
        flex-flow: column-reverse;
        margin-top: -100px;
        padding: 0;
    }
    [id^="MainProduct-template"]  .product--large:not(.product--no-media) .product__media-wrapper {
        max-width: none;
        width: 100%;
    }
    [id^="MainProduct-template"]  .product--right .product__media-list {
        display: flex;
          flex-flow: wrap;
    }
    [id^="MainProduct-template"]  .product--stacked .product__media-item {
        width: 50% !important;
    }
    [id^="MainProduct-template"]  .product--large:not(.product--no-media).product--right .product__info-wrapper {
        margin: 0 auto;
        padding: 4rem 0;
    }
    [id^="MainProduct-template"]  .product-form__buttons {
        max-width: none;
    }
}

[rene94]

Hi it worked, but on mobile it still has a white box around the product (https://bt6lqbvnzlx9m77b-74826613002.shopifypreview.com), can you help with this?

[EBOOST]

Hi,

You can add code below to end of file to remove white box:

[id^="MainProduct-template"] .product { border: none;}
[id^="MainProduct-template"] .product-form__buttons {
    max-width: none;
}

[rene94]

perfect, thanks again. I’m asking for a lot here but I was wondering if you can help me with displaying the footer all on 1 line on mobile displays, the issue is really prevalent on the home screen (https://bt6lqbvnzlx9m77b-74826613002.shopifypreview.com)

[EBOOST]

Hi,

You can add code below to end of file

@media(max-width: 768px){
	footer.footer {
		flex-flow: row;
		align-items: center;
		padding: 0 10px;
	}
	footer.footer .copyright {
		white-space: nowrap;
		margin-top: 0;
	}
	footer.footer .footer-menu li {
		margin-right: 0;
	}
	footer.footer .footer-menu {
		gap: 10px;
	}
}
@media(max-width: 480px){
	footer.footer {
		max-width: 100%;
    	overflow-x: scroll;
	}
	footer.footer .footer-menu {
		gap: 5px;
	}
	footer.footer, footer .copyright {
		font-size: 10px;
	}
}

[rene94]

It works everywhere except the ‘subscribe’ page (https://bt6lqbvnzlx9m77b-74826613002.shopifypreview.com) both on mobile and desktop it previews as 2 lines

[rene94]

it’s just gone back to normal (https://bw51kpyy7tzfsipm-74826613002.shopifypreview.com) if you use the inspect right click you’ll be able to see

[EBOOST]

Hi,

You can try to code below?

@media(max-width: 768px){
	footer.footer {
		flex-flow: row;
		align-items: center;
		padding: 0 10px;
		margin-top: auto;
	}
	footer.footer .copyright {
		white-space: nowrap;
		margin-top: 0;
		font-size: 10px;
	}
	footer.footer .footer-menu li {
		margin-right: 0;
	}
	footer.footer .footer-menu {
		gap: 10px;
	}
	footer.footer, footer .copyright {
		font-size: 10px;
	}
}
@media(max-width: 480px){
	footer.footer {
		max-width: 100%;
    	overflow-x: scroll;

	}
	footer.footer .footer-menu {
		gap: 5px;
	}
	footer.footer, footer .copyright {
		font-size: 9px;
	}
}

[rene94]

Hi, it’s fine on that page it’s the home page that’s the issue. I just tried the new code you sent and now it looks like this: https://bw51kpyy7tzfsipm-74826613002.shopifypreview.com

[rene94]

and on the desktop version of the ‘subscribe’ page it looks like this:

[EBOOST]

Hi,

Which wrong? Code above only support mobile.

[rene94]

I want the banner image to take the whole page on mobile and then the footer at the bottom. At the moment it looks like this:

[EBOOST]

Hi,

You need add code below to image show full height. Because your image dimension.

@media(max-width: 768px){
	#shopify-section-template--19623466008842__image_banner_bAJPth .banner__content {
		min-height: calc(100vh - 40px);
	}
	
}

[rene94]

Works, thank you! Could you help me so the footer is at the bottom of this page on 1 line too please (https://bw51kpyy7tzfsipm-74826613002.shopifypreview.com)

[EBOOST]

Yes. You can add code below:

footer.footer {
	margin-top: auto;
}

[rene94]

Thank you this worked, can you help make the picture bleed to the top of the page at the moment there’s a black bar at the top (https://bw51kpyy7tzfsipm-74826613002.shopifypreview.com)