CODEWITHSUNDEEP
htmlcss
purplecracka
purplecracka

Reputation: 25

What exactly is causing the width to be bigger than it should on my webpage?

I'm really not sure what is happening here. I've commented out areas of code that I suspected it would be, made sure it wasn't a glitch, there's something I'm obviously not seeing here. Hope one of you web design experts can help me here.

* {
  margin: 0;
  padding: 0;
  font-family: "Montserrat";
}

I've tried setting overflow-x to hidden which fixes it, the problem is that when I do that the overflow-y seems to be automatically set to auto instead of visible and doesn't change when I set it manually to visible.

http://jsfiddle.net/jg10vzcx/

Upvotes: 1

Views: 49

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240878

The culprit is the .sub-text element. It is a block level paragraph element with a default width of 100%. You are positioning it with left: calc(50% - 15vw) in order to center it. In doing so, it is extending past the viewport (because it has a width of 100%) and it is creating a horizontal scrollbar.

You can remove the left positioning and simply add text-align: center to the element in order to center it.

Updated Example

.sub-text {
    position: relative;
    margin-top: 2vh;
    /* left: calc(50% - 15vw); */
    font-size: 2vw;
    text-transform: uppercase;
    text-shadow: 0 0 1vw black;
    text-align: center;
}

Upvotes: 2

Related Questions