Shopify Question posted in
The Shopify help center can be found here.

Responsive Mobile CSS – Shopify

I need some help with formatting the header and hero of a website for mobile. I have some coding knowledge, but far from being proficient (I will know what you mean if you say "try changing display to block" and how to use "@media" tags). We use Shopify and I know it’s difficult without seeing code, but hoping someone may have some insight by looking at the screenshot to start.

  1. I need to make the announcement bar disappear on mobile

  2. I need help formatting the hero slideshow on mobile. The button goes below the image and creates this huge space. I just want to make the space and button disappear on mobile. So "New Arrivals" will be right below the hero.

Here is the screenshot:
https://drive.google.com/file/d/13HZ-4TAjqsktHXDorokmAS5zE3-bI6KE/view?usp=sharing

Tags:

2

Answers


  1. 0

    As You have not shared code for,Instance Let’s Take:

    .hero{
 //some css
}
.announcement{
 //some css
}

//media queries
@media only screen and (max-width: 600px) {
  .hero {
    display: none;
    visibility: "hidden";
  }
  .announcement{
    display : none;
    visibility : "hidden";
  }
}

    Now for any width smaller than 600px the css inside @media will come into use for the classes defined in it. rest everything will work as it is

    Login or Signup to reply.
  2. 0

    You can easily do this with media queries. When writing your media queries, always start with the bare minimum CSS for mobile, and as the screen size gets larger, you introduce more styles for that screen size. Here is a VERY BASIC example of what you are asking for (best viewed on CodePen):

    https://codepen.io/seanstopnik/pen/ff55dbb00531287e8d7bfa4708c37fde

    * {
  box-sizing: border-box;
}

.h1 {
  margin: 0 0 20px;
  padding: 0;
}

.header {
  background: #ccc;
}

.navigation {
  padding: 20px;
}

.header__announcement {
  display: none;
}
@media (min-width: 600px) {
  .header__announcement {
    display: block;
    color: #fff;
    background: purple;
    padding: 20px;
  }
}

.section {
  padding: 60px 20px;
}

.section--hero {
  background: BlanchedAlmond;
  padding: 100px 20px;
}
@media (min-width: 600px) {
  .section--hero {
    padding: 160px 20px;
  }
}

.main__cta {
  display: none;
}
@media (min-width: 600px) {
  .main__cta {
    display: block;
  }
}

.button {
  width: 100%;
  color: #fff;
  border: none;
  background: purple;
  padding: 10px 30px;
  cursor: pointer;
  transition: all 0.15s ease-in-out;
}
.button:hover {
  opacity: 0.8;
}
    <header class="header">
  <div class="header__announcement">
    Announcement
  </div>  
  <nav class="navigation">
    Menu
  </nav>
</header>

<section class="section section--hero">
  Hero
</section>

<main class="main">
  <section class="section main__cta">
    <button class="button">Button</button>
  </section>
  <section class="section main__content">
    <h1 class="h1">New Arrivals</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto dicta, quas sint vitae voluptatibus pariatur, labore reiciendis dolores corrupti neque deserunt. Qui alias et, adipisci harum ex iste minima itaque!</p>
  </section>
</main>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search