0

i'm trying to get my onepager to work. But sadly i have bug with my css. If i try to scale the width of my browser below the width of my content a scrollbar appears. When i use the scrollbar and scroll to the right, i see my background color does not resize to the actually width. I don't want my website to be responsive or don't want to use any mediaqueries. Just basic stuff with a bug ;)

I took a screenshot to show what i mean:

enter image description here

Here is my website: Website

Just to make sure everyone understand HOW i mean the scrollingpart: enter image description here

AgathaCrystal
  • 35
  • 7
  • On Mac in Chrome work too! – Mardzis Feb 01 '15 at 14:55
  • i uploaded another screenshot. I also work with a mac and tried it on 3 different machines. – AgathaCrystal Feb 01 '15 at 15:04
  • you use viewport meta tag with `width=device-width` but used fixed width in your css. consider using percentage instead of using fixed `px` and use media queries. this answer may help you http://stackoverflow.com/a/20297912/1294213 – Nur Rony Feb 01 '15 at 15:13
  • @Philastan i have a question are you looking for responsive design ? because my solution are based on responsive design if this is not your case then you have to provide fix width to your top level div element –  Feb 01 '15 at 15:24
  • I don't want the website to be responsive. Just a centered 1200px wide maincontent. – AgathaCrystal Feb 01 '15 at 15:43

1 Answers1

2

Remove your fix width properties e.g

style.css: 144
#header {
    height: 95px; 
    /* width: 1200px; */ //Use percentages and media query to control width
    margin: auto;
}

.section-wrapper {
    width: 1200px; //Here use media queries and better to use % instead of px
    padding: 50px;
    margin: auto;
}

section#one>.section-wrapper:after {
  content: url(img/leaf.png);
  /* height: 152px; */
  /* width: 331px; */
  display: block;
  /* position: absolute; */
  margin: -57px 0 0 700px; // Do not use margin 700px instead position it on right and add right padding or distance.
}

after setting width to 100% in .section-wrapper the text stop clipping enter image description here

Edit #2:

By removing the padding: 50px; from .section-wrapper in #one section and leaf part i got this result

enter image description here

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
  • by solving lower level nodes you can then be able to solve your width issue, there are many others places where you have such mistakes which i didn't mentioned, actually i tried to give you an idea from where you can start fixing it –  Feb 01 '15 at 15:05
  • i don't know, but non of your ideas fixed anything. Even if i delete the :after the problem still exists. And it must work even without media queries and percentages - i did it often enough :D – AgathaCrystal Feb 01 '15 at 15:12
  • by the deleting wont fix the issue. you need to set the width property from 1200px to 100% after this you can see the content in blue section will stop clipping see the picture above. –  Feb 01 '15 at 15:21
  • This wont work. The .section-wrapper is not the top-level wrapper, it is 'sections' which has a 100% width (section#one, section#two, ...) If i change the .section-wrapper to 100% my whole content will just float to the left. To your screenshot: What happens if you scroll to the right? – AgathaCrystal Feb 01 '15 at 15:42
  • Btw i really don't want to have my site responsive. I just want a 1200px wide content. Thanks already for trying :) – AgathaCrystal Feb 01 '15 at 15:48
  • 1
    @Philastan ok now review my second picture is this what you were looking all the sections are scaled 100% and there is no white area in right side –  Feb 01 '15 at 16:07
  • O-M-G you are my hero! <3 Thank you so much! – AgathaCrystal Feb 01 '15 at 16:13