I want a different text placement/size and banner.box for mobile and desktop

Store Design
,
1

Hi i am using the DAWN theme.

When i add the following code:f

.banner__heading {
  margin-top: -90px;
  font-size: 25px;
  display: inline-block;
  padding: 5px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

It looks good on mobile but it is too small on desktop view and seems to remove the margin-top property,

I tried to add this code in the shopify theme editor but it gives me the message "Online Store editor session can’t be published.

.banner__heading {
position: relative;
margin-top: -90px;
font-size: 25px;
}

.banner__box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-align: center;
max-width: 90%;
}

@media (min-width: 768px) {
.banner__heading {
margin-top: -150px;
font-size: 40px;
}

.banner__box {
max-width: 70%;
padding: 20px;
}
}

Any help would be appreciated

2

Hello @amalkasem ,

You can try to follow these steps:

  • Go to Online Store → Themes → Actions → Edit code
  • Go to Assets section → base.css file → add the following code at the bottom of page
.banner {
  background-color: #f7f7f7;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.banner h1 {
  font-size: 48px;
  text-align: center;
}
@media (max-width: 767px) {
  .banner {
    height: 100px;
  }

  .banner h1 {
    font-size: 24px;
    text-align: left;
  }
  • Save changes

Hope this can help.

Ali Reviews team.