Header Spacing

10 posts from 3 voices

• Started 10 months ago by JenniferJaco
• Latest reply from Ismael
• This topic is not a support question

Tags:

• header

1. 

   JenniferJaco
   Member

   Hello,

   Would it be possible for you to tell me some code that might fix the spacing issue I'm having on my header image? There is always a white space to the left or right of my header when viewed in the browser, and this occurs in every browser I've tried. I'm not sure if I should adjust the padding or something like that... my site is http://www.jenniferjaco.com

   Many thanks.

   Posted 10 months ago #
2. 

   Ismael
   Moderator

   Hi Jennifer,

   Try to add this in your Quick CSS:
   

   #header {
      padding: 40px 84px !important;
   }

   Hope this helps. :)

   Regards,
   Ismael

   Posted 10 months ago #
3. 

   JenniferJaco
   Member

   Hi Ismael,

   Thanks for you reply. This worked perfectly in Firefox, but it didn't help for any of the other browsers I've tested my site in (Chrome, IE, Safari)... is there some way I can enter code that will work for all browsers?

   Thanks,
   Jennifer

   Posted 10 months ago #
4. 

   Ismael
   Moderator

   Hello,

   The snippet provided should work on all browsers except for IE. Please try to remove cache/history and reload the page, see if it works.

   Regards,
   Ismael

   Posted 10 months ago #
5. 

   JenniferJaco
   Member

   Hi Ismael,

   I cleared all of my caches and browser histories, and the spacing is still off for all browsers except Firefox. Any other suggestions?

   Thank you,
   Jennifer

   Posted 10 months ago #
6. 

   Devin
   Moderator

   Hi Jennifer,

   You'll need to adjust the css for each of the media queries (for different screen sizes). So add the following into either your custom.css file (in the css folder of your theme files) or the Quick CSS in your Styling tab of the theme options:
   

   #top.left_sidebar #header {
   margin-left: 280px;
   }
   @media only screen and (min-width: 768px) and (max-width: 989px) {
   		#top.left_sidebar #header { margin-left: 218px; }
   }
   @media only screen and (max-width: 767px) {
   		#top.left_sidebar #header, #top.left_sidebar .small_footer {margin-left: -44px;background-repeat: no-repeat;}
   }

   Because you used a background image for the logo, I had to add a no-repeat for the smaller sizes. Also, you have some incorrect css in your Quick CSS it looks like where you put in the background image. There is a space between your margin amount the px which was causing it not to take effect.

   Regards,

   Devin

   Posted 10 months ago #
7. 

   JenniferJaco
   Member

   Thank you, Devin. Now, the header appears properly in all browsers except Firefox... haha. Almost there... not sure what I can try to make it work for Firefox. I also cleared the cache/browsing history again and it still isn't right.

   Posted 10 months ago #
8. 

   Ismael
   Moderator

   Hi JenniferJaco,

   I checked your site using firefox and I think it's looking good. Can you post a screenshot, so we will know what it looks like on your end?

   Regards,
   Ismael

   Posted 10 months ago #
9. 

   JenniferJaco
   Member

   Oh, nevermind. I guess it was ONLY working in Firefox... I give up. I just can't figure it out. I'll try posting a background image or something else. Thank you for your time.

   Jennifer

   Posted 10 months ago #
10. 

    Ismael
    Moderator

    Hi Jennifer,

    I think it's to early to give up. Anyway, Glad that we could help you do some tweaks.

    Regards,
    Ismael

    Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.