Jump to content

Mobile specific CSS setting not working properly

Recommended Posts

Hi, I'm using the OM template to create a simple artist page. Most of the page is pretty much set except that on mobile screens the page is not displaying correctly.What I want is for the Nav bar to be underneath the logo, the logo itself to be top and center of the page and for the background images to fill full screen.

However, I got this to work briefly but now the media CSS appears to not work. The url of the website is richiequake.com and the password to view it is Help123.



I have decided to place the logo on the upper left hand and the menu button on the upper right hand side of the website. This is my CSS now:

media screen and (max-width: 500px) {
  #header {
    float: none;
    display: block;
    text-align: left;

@media only screen and (max-width: 400px) {
  #collection-5de6d28545f1a7075b7a2741 .canvas{
    max-width: 100% !important;
    max-height: 100% !important;
 padding-left: 0px !important;
 padding-right: 0px !important;
 padding-top: 11px !important;
 background: url(https://static1.squarespace.com/static/5cff45ae4a957c0001a6673b/t/5dc6fcead1c0ab7b9e4f5e60/1573321963518/richie_+5.jpeg)no-repeat center center;
  -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

@media only screen and (max-width: 400px) {
  .logo-image .logo img {
    position: relative;
    right: 100px;
    top: -130px;
    width: 60%; //add for good resize based to screen  

@media only screen and (max-width: 400px) {
  #mobileMenuLink {
    margin: 0;
    display: inline-block; //change block to inline
    position: relative;
    font-family: "Helvetica Neue",Arial,sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.2em;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    visibility: visible;
    left: 70%;
    top: -2%;

@media only screen and (max-width: 400px) {
  #collection-5de6d28545f1a7075b7a2741 {

.page-borders-thick #mobileMenuLink {
        border-bottom-width: 2px;
        padding: 5%; // ADD PADDING

#mobileNav {
  background: none;
  position: relative;
  top: 50%;

#mobileNav .wrapper {
  border-bottom-style: none;
  border-bottom-color: none;

#mobileNav .menu-open {
   margin-top: 30px !important;

Now my issue is that I want the menu to open down when the button is clicked. I tried to do this by using the  .menu-open class but that did not work. How can I do this?

Link to comment
  • Replies 1
  • Views 1k
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.