How to reduce a banner size from Dawn Theme

kbeautyblossom
Excursionist
27 0 9

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 14 (14)
diego_ezfy
Shopify Partner
2299 413 539

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
Denishamakwana
Pathfinder
100 14 13

Welcome to shopify community.

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

kbeautyblossom
Excursionist
27 0 9

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
1389 131 207

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
27 0 9

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
1389 131 207

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
2299 413 539

@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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.
kbeautyblossom
Excursionist
27 0 9

Hi Diego, 

 

Thank you so much for your reply. 

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

HamishDavisonIC
Explorer
52 6 41

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

 

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