Streaming live at 10am (PST)

Issues with my responsive containers


#1

I am relatively new to WebFlow and am having some responsive issues with the site I am building.

Site: http://thewebguru.webflow.com/

Issues
(1) When viewing on desktop, it seems like my body containers are not centered on the screen and are more left align no matter the set position. As the site responds to larger screens you will notice that the WebFlow containers are floating left apposed to both horizontal margins responding accordingly keeping the content centered in the frame.

(2) Also when viewing on mobile devices you will see that the containers again are not centered but instead this time floating right. I do notice on my containers there is 75px of left padding set that can not be edited.

Additional CSS:
I do have a css style that I have entered into my dashboard. I am trying to accomplish the popular 1200px body width for my containers apposed to the 970px (I believe) defaults that WebFlow sets. I have noticed this topic in the WebFlow forums and used the CSS override that was supplied. Here it is below:

<style type="text/css">

@media screen and (min-width: 1200px) {
.w-container {
max-width: 1170px;
}
}

Even when I remove this css class, the container content still sticks left. I do notice that the WebFlow site content seems to be fitting within 1200px and have looked through the tutorials, so I am not sure if the information I received from the forum is now outdated and there is another way to achieve the more "full width" body content look.

Any help is much appreciated!

Thank you,
Luke


#2

that is definitely the culprit. If I remove it (chrome inspector) the content centers perfectly. Post a public link if you would like help with determining the source.


#3

I apologize, I thought it was public. Here is the link:

https://webflow.com/design/thewebguru?preview=744d1df645a50ffd5c588278cb12b511


#4

Hi @LukeB,

Click on any instance of your w-container.
under the style tab > display setting click on the left margin "75" highlighted in blue.
in the resulting property pop up box click the trash can button that says "Remove this style"
that will restore the property to auto for the left margin for each instance of the container.
repeat for any other classes or media queries / devices and you should be all set.


#5

Yes seems to be all working fine now. I must have accidentally added those values in.


#6