How can I improve the design and layout of my Dawn theme website?

Store Design
1

Hello,

I have issues with designing my site. The theme is use is dawn. here is the issues:

  • the spaces on the banner is weird on mobile and desktop. I would like it to be a but down so we can see the picture properly

-i would like the color of the button of the banner to be yellow instead of black

-we can’t see the product properly on the banner picture (on desktop only)

-the sale button is red but the text is in black. Is there a way to make it white so it’s easier to see ?

-even though they are yellow, all the button are cloudy, I don’t know why

-the cart button is not visible

-the product part is not centered on mobile. (its on the left)

here is my website: https://jigaa.it/

neampa (password in case)

Thank you in advance for your help !

best, mos

2

Hi @Mossiah please add links to the buttons and they will be ok. they are cloudy because there is no link attached to them. for the rest of the changes here is the code you can try

  1. Go to Online Store-> Theme->Edit code
  2. Asset-> base.css ->paste the below code at the bottom of the file.
@media screen and (min-width: 750px){
.banner--large:not(.banner--adapt) {
    min-height: 50rem;
}
.banner__media img{
    height: auto;
    margin-top: -100px;
}
}
@media only screen and (max-width: 768px){
.banner__media img{
    height: auto;-50px;
}
.featured-product > * {
    text-align-last: center;
}
.featured-product .product-form__input,.featured-product .product-form__input .select,.featured-product .quantity{
  margin: auto !important;
}
}
.banner__buttons{
   background: yellow;
} 
.banner__buttons a{
   color: #000;
}  
.badge {
   color: #fff;
}
1 Like
3

I tried what you said for the margin of the banner text but it did not work to change the position of the text. i really want it to move down as in this picture.

IMG_3267.PNG
IMG_3267.PNG750×1334 97.2 KB

thank you

4

please replace the above code with this one

@media screen and (min-width: 750px){
.banner--large:not(.banner--adapt) {
    min-height: 60rem !important;
}
.banner__media img{
    height: auto !important;
    margin-top: -100px;
}
}
@media only screen and (max-width: 768px){
.banner__media img{
    height: auto !important;
 margin-top: -50px;
}
.banner__content{
  align-items: end !important;
}
.featured-product > * {
    text-align-last: center;
}
.featured-product .product-form__input,.featured-product .product-form__input .select,.featured-product .quantity{
  margin: auto !important;
}
}
.banner__buttons{
   background: yellow;
} 
.banner__buttons a{
   color: #000;
}  
.badge {
   color: #fff;
}
1 Like
5

thank you very much ! it solved the problem. But is there a way to make the entire block in black color please ? because the end on the block is white/grey not as the rest.

6

Hi @Mossiah add this code at the bottom of the previous one

.banner {
  background: #000 !important;
}