Streaming live at 10am (PST)

Line on the right of my page


#1

Here is my website. https://webflow.com/design/pidgen?preview=c6e0cdf6ff9a52be81ffa04a92e9a6ea
No matter what I do, there seems to be a red line (my body background) that is always protruding. I have looked to see what may be causing it and I cannot find it since everything seems to be width 100%.


#2

Do you happen to be using Safari?
This sometimes occurs in Safari with my sites... Not always, but sometimes. But when switching to another browser (Chrome), there's no problem. Seems some browser incompatibility I think.


#3

@uri_frischman The red line is your Body - with a background color of red.

It's something with your second to last section (the green one). Try deleting it and you will see that the spacing goes away. Must be an element inside there causing the problem.


#4

@uri_frischman, it appears that the extra margin is caused by percentage-based margins/paddings on the images inside of your "Custom Cases" section.

If you need to center the images inside the columns, the best way to do that (since they are images and have automatic 'inline-block' behavior) is to go to your 'case column' class and give it a text alignment of Center:

Before you do that, you'll have to clear the %-based margin/padding on your case classes inside the columns.

Also, I would recommend optimizing your image sizes so that they are not too large. Currently, it takes a while to load your page even on a fast internet connection. Ideally, the size (in pixels) of the image you upload should be exactly the size that you want it visible on the screen (with the exception of HiDPI/retina images, which should be twice as wide/tall).


#5

Thanks for the replies. I am planning on optimizing the pictures tonight. Thanks again.


#6

I tried putting the center allignment on, and nothing happened.


#7

It doesn't look like you cleared the percent-based margin and padding that you added to some if the images. For each image that you added those to, you have to click on each blue value, then choose 'Remove this style'.


#8

Here is my fixed version. Especially on the phone sizes, there is a huge red line. Thanks for the help.
https://webflow.com/design/pidgen?preview=c6e0cdf6ff9a52be81ffa04a92e9a6ea


#9

There must be something else pushing outside the body. I found that If you add 0 left and right margin to how it works speacial class on mobile will remove the space. Seems to be an issue with setting margins on ALL Paragraphs and this class and they conflict.


#10

Thank you so much!!! It did it!! Now its all good.


#11