FROM CACHE - en_header

How to reduce a banner size from Dawn Theme

kbeautyblossom
Excursionist
36 0 13

I like DAWN design but the banner size is little too big. too wide and tall. 

Could you tell me how to reduce the size with coding? Thanks a lot!! 

Replies 17 (17)
diego_ezfy
Shopify Partner
2809 531 744

Hello @kbeautyblossom,

Please share:
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).

If the store is not online yet, please follow this quick tutorial to learn how to safely and temporarily share an offline/unpublished theme URL.

Kind regards,
Diego

Denishamakwana
Astronaut
1183 154 193

Welcome to shopify community.

Please share your store URL and if your store is password protected then provide password too.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
kbeautyblossom
Excursionist
36 0 13

Here's my URL : www.kbeautyblossom.com

It's about the banner size on the main page.  I want to make it 70-80% width and 20% smaller height. 

Thanks in advance. 

 

.banner__media {
height: 100%;
position: absolute;
left: 0%;
top: 0;
width: 100%;
}

.banner__media-half {
width: 50%;
}

.banner__media-half + .banner__media-half {
right: 0;
left: auto;
}

@media screen and (max-width: 749px) {
.banner--stacked .banner__media-half {
width: 100%;
}

.banner--stacked .banner__media-half + .banner__media-half {
order: 1;
}

.banner:not(.banner--adapt):not(.banner--stacked):not(.banner--mobile-bottom) > .banner__content {
min-height: 39rem;
}
}

@media screen and (min-width: 750px) {
.banner__media {
height: 100%;
}
}

Elias
Shopify Staff
Shopify Staff
1991 202 338

Hey, @kbeautyblossom.

Thank you for reaching out and posting this question!

I understand you're looking to decrease the banner width and height for the Dawn theme. Though I'm unable to provide the custom coding that you're looking for, as I am not a developer. However, since the Dawn theme is supported by Shopify, this is something that our Theme Support team can help you with. If your store is subscribed to a plan, then you're eligible to use the complimentary design time included with your subscription on customizing your theme. While we’re not able to provide account-specific support via the Shopify Community at this time, we’d be happy to continue assisting you through live chat, email, or callback. Please visit the Shopify Help Center and log in to your account to create a support request.

I think you've done a magnificent job with the Dawn theme, and there isn't much I can suggest for feedback. Nevertheless, do you have marketing plan for your store?

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

kbeautyblossom
Excursionist
36 0 13

Hello Elias, 

 

Thank you for your response and thanks for the compliment for my site. 

I tried to resolve with my previous problem (How reduce the product sizes from my collection page) with an agent but it wasn't very helpful but I got some solution from somebody else here Shopify Community. I played with the numbers from the original css and tried to add right alignment but it didn't work well. I'll try to reach the Shopify agent again but I don't expect much. 

I'll check the marketing plan you suggested. It's the most difficult part ever! LOL

Elias
Shopify Staff
Shopify Staff
1991 202 338

Hello, @kbeautyblossom.

Thank you for following up! While our Support team might not be best suited to assist you with modifying the coding, as they aren't developers. However, they'll be able to assist you with submitting customization request to our Theme Support team. Our Theme Support would be the right team to assist you with the alignment or the banner size for your store. 

Feel free to keep me posted!

 

Elias | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

diego_ezfy
Shopify Partner
2809 531 744

@kbeautyblossom,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. In your theme.liquid file, find the </body> (press CTRL + F or command + F on Mac)
3. paste this code right above the </body> tag:

 

<style>
[id*='section'][id*='image']{
    max-width: 80%;
    width: 100% !important;
    margin: 0 auto !important;
}

@media (max-width: 749px){
    [id*='section'][id*='image']{
    max-width: 100%;
}
}
</style>

 


You can change the values as per your wish:

80% = desktop width
100% = mobile width

You can also replace the 80% with a pixel value. Something like 1000px. 

In this case altering the height will make the image look squished, since the image is forcing an aspect ratio. Therefore I would not recommend doing so.


Kind regards,
Diego

kbeautyblossom
Excursionist
36 0 13

Hi Diego, 

 

Thank you so much for your reply. 

I'll try it and let you know. Thanks again!! 🙂

HamishDavisonIC
Shopify Partner
62 9 61

@kbeautyblossom I'm at work so can't check this fully but:

 

I added max-width 750px;I added max-width 750px;

iMuhamad
New Member
2 0 0

Hi Hamish

This worked for me but it's more useful if i can reduce the height.

I tried adding max-height: 500px;

did not work. 

kbeautyblossom
Excursionist
36 0 13

Dear Hamish, 

 

Thank you so much! I'll try it. 

kbeautyblossom
Excursionist
36 0 13

I used the max-width: 1300px; & left: 9%; to center the banner.

It looks great on desktop but not for mobile. 

Thank you for your help! 

iMuhamad
New Member
2 0 0

I am trying to reduce the height, so I change the value here to 50%, it worked on the banner but the placeholder I believe has to be updated from a different line.

Now i have gap between the banner and next section.

any thoughts? 

@media screen and (min-width: 750px) {
.banner__media {
height: 50%;

Screen Shot 2021-09-23 at 10.37.59 PM.png

kbeautyblossom
Excursionist
36 0 13

Hello Diego, 

Your code works great. I used max-width: 90% instead and still working with the height and the button. 🙂

Thank you so much!! 

Paul_Davis
Explorer
45 1 33

Hi,  I have used this fixed and it works great thanks.

 

However how can I change the banner to fit within the frame and not stretch to full width?  I have temporarily used the scale idea in here however it would look a lot better if it was inside the frame like the rest of the stuff on my home page.

 

Thanks

P.S.  Please see here at how it looks on my site and you will see what I mean.

https://twisted-gifts.com

Slyther-Gryff
Tourist
3 0 1

I did what you said and changed it to 90% and it looks great on Desktop and iPad. Do you know how I can have it so it stays 100% on mobile devices? 

Slyther-Gryff
Tourist
3 0 1

I did what you said and changed it to 90% and it looks great on Desktop and iPad. Do you know how I can have it so it stays 100% on mobile devices?