CSS editing of mobile site

  • connorunger · Member ·

    I’m having two main issues with finalizing my mobile/tablet site and no matter how hard I try I can’t seem to figure out the magic bit of CSS to get control over these elements so anything is appreciated.

    1. I want my logo to be bigger. This has been adjusted on the main site but I can’t seem to find any way at all to enlarge it on the other versions.

    2. On mobile my dropdown primary menu has a transparent background this means that when it goes over my logo, or other text it frankly looks awful and is hard to use, how can I change the background color on this so that the dropdown list has a white NON-TRANSPARENT background?

    The blog I need help with is: (visible only to logged in users)

  • sreejithvme · Member ·

    In order to fix CSS of mobile versions, you need to specify the attributes inside the following code.Thanks to @thesacredpath who helped me with a similar query couple of years ago.

    @media screen and (min-width: 886px) {

    }

  • hallluke · Member ·

    The width is a bit different in your theme but the process is still the same, here’s some code to try:

    @media only screen and (max-width: 900px) {
  .site-logo img {
    width: 150px;
  }
}

.main-small-navigation {
	background-color: #fff;
}
  • connorunger · Member ·

    hulluke, that worked to fix the dropdown menu, thanks! For some reason I was majorly struggling to figure out it was called .main-small-navigation ugh

    no luck though with the site logo size, I’ve tried variations of that and no matter what its only possible to change the desktop one. Not sure if its something in the “Publish” template I’m using?

  • hallluke · Member ·

    Try this instead and let me know what happens:

    @media only screen and (max-width: 900px) {
  .site-logo img {
    width: 150px;
    max-width: 150px;
  }
}
  • connorunger · Member ·

    that was it! Thanks so much

  • The topic ‘CSS editing of mobile site’ is closed to new replies.