Need help with margins of Weebly site

[paigeweber]

Hello!

I can’t figure out some of the CSS I need for my website, http://orthopaedicandsportsclinic.weebly.com/

There are four things I need to do:
1. Get rid of the white space at the very top.
2. There are two little white lines in my blue box.. need to get rid of those. Can’t even figure out what they are.
3. Get rid of the white space between the slide show and blue bar.
4. Stretch the slideshow across the width of the page.

Any help is appreciated. And let me know if there is anything else I should provide. Thanks so much!

[Paulie_D]

Get rid of the white space at the very top.

Not sure if any of this is even possible in Weebly but here goes.

The white space has two parts.

Firstly.

#page-wrap {
  background: url(theme/body-bg.jpg?1423522112) repeat;
  border-top: none;
  border-bottom: none;
  padding: 27px 0px 20px 0px;
}

The 27px to top padding should be removed.

Secondly,

There’s a table…an empty one.

<table id="header">
                <tbody><tr>
                    <td class="phone-number"></td>
                    <td id="header-right">
                        <table>
                            <tbody><tr>
                                <td class="social"></td>
                                <td class="search"></td>
                            </tr>
                        </tbody></table>
                    </td>
                </tr>
            </tbody></table>

in your .container div.

If it’s empty, remove it and the remaining space disappears.

[Paulie_D]

There are two little white lines in my blue box.. need to get rid of those. Can’t even figure out what they are.

Looks like it’s the background image…here…try removing that.

#nav-wrap .container {
  clear: both;
  overflow: hidden;
  position: relative;
  padding-bottom: 35px;
  margin-bottom: 40px;
  background: url(theme/saperator.png?1423522112) no-repeat bottom left;
}

Just notice there’s a shipload of tables being used for layout…is that your coding or Weebly?

Either way…it’s not 1999 anymore…we don’t use tables for layout.

Moving on….

[Paulie_D]

Get rid of the white space between the slide show and blue bar.

This one is going to take a while….there’s a lot of stuff you are going to have to change and I’m doubtful if this is actually something that Weebly will let you do since it seems to be integral the actual slider.

If this a template or something? Could you pick another?

[paigeweber]

Thank you for the replies! When I tried this:

#page-wrap {
background: url(theme/body-bg.jpg?1423522112) repeat;
border-top: none;
border-bottom: none;
padding: 27px 0px 20px 0px;
}

the white lines blinked after I refreshed the page, but stayed there nonetheless. Do you have any suggestions?

[paigeweber]

Also — it’s Weebly’s coding, not mine. But I agree haha

[paigeweber]

Awesome! Weebly won’t let me see all of the HTML for some reason, but I could get to the table part and delete it. Huge help. Thanks.

[paigeweber]

Update: I got rid of the white space at the top and on the sides of the slideshow, but I’m still working on the white space between the blue section and slideshow.

Also — is there a way I can make the footer responsive to the width of the page? Like right now on the home page, I want it to be further up (where the slideshow ends), but I don’t want that to affect the other pages.

Thanks!

[Paulie_D]

Weebly won’t let me see all of the HTML for some reason

You can inspect it using Developer Tools (hit F12) in your browser.

This will allow you to see what HTML & CSS is affecting the site (it’s what I did).

[Paulie_D]

One thing…this

#main-wrap .container {
  min-height: 400px; /* this */
}

If you turn that off…you lose a lot of whitespace from the site.

[Paulie_D]

is there a way I can make the footer responsive to the width of the page?

It is responsive to the width of the page…it’s a div that is 100% wide automatically.

Frankly, the ‘internal’ div shouldn’t have bare text in it…that text should be wrapped in a text element (probably a p tag in this case)

<div id="footer-wrap">
  <div class="container">
     © 2015 Orthopaedic & Sports Clinic |1014 W. St. Clare Blvd. | Suite 1020 | Gonzales, LA 70737
  </div>
</div>

[Paulie_D]

I’m still working on the white space between the blue section and slideshow.

It’s the bottom margin – see below

Line 12

#nav-wrap .container {
  margin-right: 50px;
  clear: both;
  overflow: hidden;
  position: relative;
  padding-bottom: 35px;
  margin-bottom: 45px; /* remove this */
  background: url(theme/theme/saperator.png?1423522112?1423563721) no-repeat bottom left;
}

However, that’s only part of it as you seem to have the same selector twice in the CSS although some of the declarations are different.

Line 67

#nav-wrap .container {
  clear: both;
  overflow: hidden;
  position: relative;
  padding-bottom: 35px;
  margin-bottom: 40px;
  background: url(theme/saperator.png?1423563721) no-repeat bottom left;
}

[Shikkediel]

Hey, those HTML/CSS boxes look nice. Don’t mind me party crashing the topic for it. How did you manage to create them, @Paulie_D?

[Paulie_D]

Chris Coyier mentioned it in the forum revamp thread

In some flavors of Markdown, you can do like [triple tick]css at the start of a block to indicate the language,

So

something

something

something

JS doesn’t work…the site throws a security warning.

[Shikkediel]

Okay, thanks. That’ll be handy. I must have seen but not really read it…

[Author]

Posts