How to optimize banner size for desktop and mobile?

[UzairAli]

Hey! 

I'm having some issues when it comes to optimizing my banner size to fit mobile & desktop. I have the furtop -v-1-0-0 theme.
I dont know exactly how to put the code, its placement specially but i do know where to go in order to insert the code

I'd appreciate if anybody can assist me. 

Thanks! 

[dmwwebartisan · Accepted solution]

@UzairAli 

add the following code at the bottom of your assets/theme-responsive.css

.single-slider {
    width: 100%;
    background-position: center;
    background-size: cover;
}

[dmwwebartisan]

@UzairAli 

Please share stroe URL and Screenshot what do you want!

Thanks!

[UzairAli]

Dear concerned,
I want to optimize the banner size of my store.
For example:
The size of the banner on desktop can not be same for the mobile banner.
but in my case the moment i update any banner image its the same size being updated for both desktop and mobile which i don't want.
i want it to be rational according to device type.

URL of store:
https://theoils.net/

Pictures are attached below

 Desktop BannerMobile Banner

[Ajay-app-dev]

Hi @UzairAli 

Let's fix this within 10 seconds. Go to your theme > edit code > style.css or style.scss and paste the following css below. 

@media only screen and (max-width: 575px)
.single-slider {
    height: 390px!important;
    width: 100%;
    background-position: center;
    background-size: cover;
}

This is how, it will look in mobile view. Do let me know if anything requires. 

[UzairAli]

Dear Concerned,
Would you please confirm is this the right way to do?

Thank you.

[Ajay-app-dev]

yes

[dmwwebartisan]

@UzairAli 

add the following code at the bottom of your assets/theme-responsive.css

@media only screen and (max-width: 575px){
.single-slider {
    height: 390px!important;
    width: 100%;
    background-position: center;
    background-size: cover;
}
}

Thanks!

[UzairAli]

Below 542? you mean sir?

[Ajay-app-dev]

You can include this css in this or add below  542 line

[dmwwebartisan]

@UzairAli 

Add code after line no 542 

[UzairAli]

Now when the mobile banner is fine, the desktop banner is not in size. 😞

[dmwwebartisan · Accepted solution]

@UzairAli 

add the following code at the bottom of your assets/theme-responsive.css

.single-slider {
    width: 100%;
    background-position: center;
    background-size: cover;
}

[UzairAli]

Dear Concerned,
I really appreciate your assistance, i was able to fix the issue.
Thank you so much.

Just a little more help i require,
I have attached a screenshot below,
I want to remove  the The Oils written on the left it a clickable button which takes you to the homepage, since i am having already home home button i dont need The Oils button.

Thank you

[dmwwebartisan]

@UzairAli 

This not a button . this logo text please upload your logo 

[UzairAli]

Dear Concerned,
What if i dont want it at all?

[dmwwebartisan · Accepted solution]

@UzairAli 

add the following code at the bottom of your assets/theme-responsive.css

.logo {display: none !important;}

[UzairAli]

Good Bless you dear.

Thank you so much for your precious time.

[dmccommons1]

@dmwwebartisan my client has a  Shopify site and the banner needs to be optimized. Is there one code that fixes this problem or is the code unique to each site? If So, what would be the code that helps here? Here is what the banner looks like now. Don't be confused by the image that is up now. She chose a good image that looks well centered. 

[dmwwebartisan]

@dmccommons1 

Please share the store URL!

Thanks!

[dmccommons1]

https://koinophobic.com/

[dmccommons1]

@dmwwebartisan is there anything that could help her?

[dmwwebartisan]

@dmccommons1 

Please a screenshot of what do you want exactly.

Thanks!

[dmccommons1]

@dmwwebartisan something like pink lilly's site on mobile and desktop. 

[Ajay-app-dev]

Add this 

@media (min-width: 1365px) and (max-width: 1500px)
.single-slider {
    height: 700px!important;
    background-size: cover !important;
}

[jandrei]

 @Ajay-app-dev  Can you please help me optimize the banner settings on my site for mobile? URL is neuro-tea.com. Banner looks ok on desktop (image below), but the sides get cut off and the text gets bunched up on mobile (image below). I'm also having an issue with a picture showing up beside a block of text on mobile, but it should be above the text on mobile (pics below as well). Thanks!

[Ajay-app-dev]

@jandrei kindly share the store password.

[jandrei]

@Ajay-app-dev password is Temp123

[jandrei]

@Ajay-app-dev  Checking to see if you saw my previous message? You should be able to login to the site. Thanks.

[Ajay-app-dev]

Hi @jandrei , yes i checked and I am able to log in with a shared password.  But as I can see, it requires a little bit more custom work from a designing point of view. At this point, I need to make some alterations to the mobile end. which requires custom work.  Have a look, this is what, we can achieve with the current structure, For, getting the desired result, I need to change the bit structure. 

[jandrei]

@Ajay-app-dev Thanks for the reply. How much would the custom work cost? Also, regarding the last screenshot in my first message, were you able to figure out if we can get the picture above the text? Thanks.

[Ajay-app-dev]

@jandrei  yes , sure