Resize Logo and Text Mobile

2 Views

I’m doing a site for my uncle and I have a slight issue. When I visit it on a mobile, the Logo, site title, and navigation bar are all mushed together.

Here’s what it looks like here.

Read More

How can I change this in CSS? I’ve looked all over, and I didn’t find any answers. I’ve tried changing the @Media CSS part on style.css

Post Views: 2

Related posts

4 comments

  1. You could try doing:

    margin: 20px;

    That should create a gap between the logo and the title should be farther apart. Also if you could include some code in your posts that would be great.

  2. Since the site is currently down and there is no code what so ever, I can at least help you out with how to apply media queries.

    @media (max-width: 480px) {
   .<yourimg>: <your styling>;
}

    This will allow whatever you are styling to be applied on screen that are LESS than 480px wide. You are obviously allowed to put in the desired width you want. This is but an example 🙂

    You can read all about media queries here

    Hope this helped a bit 🙂

    // Marc Hjorth

  3. i use this:

    <div class="col m12 s12 l8 offset-l2"> </div>

    which sets the width of the div based on the size of the screen viewing it, making it easy to design a mobile site without having to design two separate sites.

    for example, i’d make a container around certain area, set it as a row with a div and then use columns which change based on screen size

    <div class="sections-container">
 <section id="our-vision" class="section">
  <div class="row">
   <a name="our-vision"></a>
     <div class="col m12 s12 l8 offset-l2">

     </div>
  </div>
 </section>
</div>

  4. I had quick look at the website.
    There is an issue with an empty side bar that pushes the navigation down.

    The sidebar with the following id:
    id=”sidebar-header”
    You should try to disable the sidebar in your theme if you don’t need it.
    or you can add a simple css rule to your stylesheet to not display it:

    #sidebar-header { display: none; }

    to move the mobile menu you can edit this style rule in style.css on line 2795:

    @screen and (max-width: 760) {
 ...
#access {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 3;
   width: 100%;
   padding: 0;
   background: none;
   box-shadow: none;
}
...
}

    Edit the top and left properties there (add some pixel values like: top: 70px; for example)

    I hope this helps.

Comments are closed.