Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Mobile specific CSS setting not working properly


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?

Edited by richieqquake

Share this post

Link to post

1 answer to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...