Website formatting-Desktop/Mobile-Portland

[elev8labsnutrit]

Hi there,

I am hoping that someone can help me. We are creating a nutrition supplement website, and we are looking for some support as our desktop site looks okay, but when we switch to the mobile site. The image banner shows a white block underneath it as if the photo is the wrong size. When I try different photos of different sizes, it all still shows a white block underneath. Does anyone know how to get rid of it?

As well, for our products page, does anyone know how to get rid of the white box underneath the product photos, I would prefer it to be black to match the background? With white text.

My URL, is https://32290571.isolation.zscaler.com/profile/7457e489-2956-4c1d-ba11-21f73019aae9/zia-session/?con...

Thank you!

[sahilsharma9515]

Hi @elev8labsnutrit I have looked into your site but it is password protected, so can you please send the password as well, so that I can provide you solution that can work for your store.

Also it will be easy to rectify the problem, if you can send me the screenshot where you are facing the issue.

Best regards

Sahil

[elev8labsnutrit]

Hi there,

Yes, Here are some screenshots,

Password: Supplements1

[sahilsharma9515]

Hi @elev8labsnutrit There is no screenshot with the message, but thanks for the password, I git your issue.

The white space you are referring to in mobile at home page, it's not actually a white space, it's a text that you have added.

as the text and background both are white that's why you are unable to see it.

If you want that text then add this code, Please add the code in your theme.css/base.css/style.css file which is available in your theme.

@media only screen and (max-width: 620px) {
.image-banner__column.image-banner__column--column> h1 {
    margin: unset; //if you want to remove the white space, after showing the text.
    color: red !important; //change the color to your choice.
}
.banner__media.media {
    margin-bottom: unset; //remove the white space.
}
}

Result after above code:

If you just don't want to show the text and get rid of it in the mobile add this code.

@media only screen and (max-width: 600px) {
.image-banner__column.image-banner__column--column> h1 {
    display: none;
}

h2.image-banner__heading.title--section.title--decorate.title--section-mt-none.h2 {
    display: none;
}
}

Result: 

For product page: I think you are talking about this space.

if yes then Please add the code in your theme.css/base.css/style.css file which is available in your theme.

@media only screen and (max-width: 620px) {
.product__media-sublist:after{
display: none;
}
}

Result: 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[elev8labsnutrit]

Hi there, On my desktop the "Time to Elev8 your life", show's on top of the green photo. Ideally we would like to have it appear the same as the desktop, is that possible? We would like the text to overlay on top of the photo if possible.

If we remove the text from the mobile, will it still appear on the desktop?

As well, Yes for the product, if you are able to help me move the text up. 

I was referring to the white space below the products on the main product page, before you click into the actual product.

[sahilsharma9515]

Hi @elev8labsnutrit Please add this code if you want the text overflow on the image as same as desktop:

@media only screen and (max-width: 600px) {
.image-banner__column.image-banner__column--column> h1 {
    position: absolute;
    top: 10px;
}
}

Result:

If we remove the text from the mobile, will it still appear on the desktop?: If you use the code I have provided then the answer is YES.

Regarding the other error please provide the screenshot, As I am unable to locate it.

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

Best Regards

Sahil

[elev8labsnutrit]

Thank you, are you able to add the code for me for the text overflow onto
the image on mobile?

I am unaware as to where to place the code.

Thank you!

[elev8labsnutrit]

Hi there,

I am wondering if you received my previous message. If you can support in
helping us add the text to overflow on top of the image header that would
be great (for mobile)

Thank you,
Courtney

[sahilsharma9515]

Hi @elev8labsnutrit Would love to help you, but I need the access of the store without that I will not be able to help you.

Best Regards

Sahil