Clash of logo with text - how do I adjust the spacing?

Clash of logo with text - how do I adjust the spacing?
0

#1

When I view my website’s about us page (landing.summful.com), on a mobile (iPhone), the logo and the heading (word) clash. See below screen dump.

Can anyone assist with how to fix this please?

Thanks :slight_smile:

Mark


#2

I would use a media query to target the minimum width this occurs in, and add a bottom margin to the logo.


#3

Use media query.

@media screen and (max-width: 324px){
    //Style logo here
}

#4

Thanks :slight_smile:

Would you be able to add more detail in to the code, by chance? I’m pretty new at this and not sure what the //Style log here code should be?

The current main header code is:

<div id="awd-site-logo" class="animated" data-animation="fadeInDown" data-animation-delay="500">
    <h1><a href="#" class="go-slide" data-slide="home"><img src="assets/img/logo_sml.png" alt="" width="300" height="124" /></a></h1>
</div>

<button class="menu-toggle animated" data-animation="fadeInDown" data-animation-delay="500" data-role="toggle">
    <span></span>
    <span></span>
    <span></span>
</button>

Do I simply add this code under the media query, but with additional margin details?


#5

Many Thanks :slight_smile:


#6

Add this to your css.

@media screen and (max-width: 324px){
    #awd-site-logo{
      margin-top:30px;
    }
}

#7

Thanks
There are quite a few CSS fles on the site. I’ve added it to the styles.cc file at line 203, but didn’t seem to have any effect? Wrong place perhaps?


#8

Try checking your developers console. It might have been overridden. also you might want to add the important attribute like this.

@media screen and (max-width: 324px){
    #awd-site-logo{
      margin-top:30px !important;
    }
}

#9

No one here will be able to tell you with certainty where to put the code, especially if you’ve got multiple CSS files.

I see you’ve got a lot of questions about this website. Have you gone through any of the freeCodeCamp curriculum? This forum is intended to provide students support with the challenges and projects provided rather than random side-projects. If you make it through the introductory material and the first few projects, you’ll be well equipped to handle these issues on your own.