I am creating a webpage with CSS and HTML and I stumbled upon an annoying issue. When I resize my browser window, the background color covers the part of the page that is out of view, on the right side. It sounds a little vague but luckily, I have found a webpage on which this occurs also, here. Dragging the browser window to the left or right of the screen (Win 7 and 8) will resize the page, and when you look at the off-screen part of the page, you can see that it's "covered" with the background color.
I have tried searching the web for a solution to this issue but I find it hard to come up with an effective search term. Hopefully someone here can help! Thanks in advance!
You need to add a "max-width" to the .container, like so (includes current code):
.container {
width: 1200px;
margin: 0px auto;
max-width: 100%; //this is the new line
}
(.container is found in default.css on line 212.)
Related
So I have an issue when the screen is a certain width my background photo disappears. It's weird because at full screen (desktop) it's fine and on mobile it's fine. It's kinda the in-between space like tablets or small desktop screens where the background photo leaves/disappears. (The site was written with "responsiveness" in mind.)
The code is quite extensive so it would probably be easier to visit the page in question and use "inspect" to see the code. Unfortunately, iv tried some solutions but they have not worked which means I have no clue what I am doing wrong! How can I get the photo to NOT disappear regardless of the browser/screen width?
See the page # Zoeaa.com
RECREATE ISSUE BY: Reducing the browser and at a certain point, and the background photo should disappear.
Would really appreciate the help! If there is anything I can do to improve this question, please let me know!
Photo of site working.
Photo of the site not working.
I reviewed your site and I think this is not actually background issue but height issue on the element which you applied this background image.
I found something like that:
#media only screen and (max-width: 1360px){
.px_slider, .px_slider .slides>li {
height: auto !important;
}
}
So when height: auto !important; the element I found height is 0 that's why background image not showing. So just check you media query break-points wheres you wrote same type of CSS.
See here:
And when showing:
I am not an expert in this, but I have managed to build a website or two and have a reasonable grasp of css.
All the other pages on the website respond properly to a browser resize but on this page and only this page; http://theayurvedapractice.com/category/blog/ there is a problem.
It happens when the browser is reduced from full width.
The .site-content usually resizes when the #main.wrapper reduces in size but on this page, it remains bigger and therefore the contents stay bigger than the browser.
Any help would be much appreciated - I'm sure it's something simple (I hope!).
Thanks,
Kate
I think your answer lies in this rule.
#page {
background: white url(images/torn_paper_edge.jpg) top left repeat-x;
min-width: 800px;
}
sets minimum width of 800px to blog pages.
found in child theme style.css
hope this helps.
I just began developing a website for a client and have ran into a problem of which I've never encountered before.
As I begin to re-size my browser my page body begins to wrap around my containers which leaves a very annoying bar to the right, I am certain it is the body element which is causing the problem as I changed the background color and the wrap appeared in that color.
I have built this site upon a fluid grid system and never had this problem in a previous version, however my client did not like the adaptive style implemented in an earlier version so I changed the responsive behavior to only take effect upon the main wrapper of the document.
My site can be seen here on my test server - http://ajsimsdesign.com , please drag resize the browser to about 400px wide and scroll across to see the problem described above.
Any suggestions to why my site is behaving like this would be much appreciated, I am completely boggled!
Can you try removing the width on line 299:
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width: 940px; <-THIS
}
That seems to work when I turn it off in the console.
The div.container.videos that starts on line 124 of the page source isn't being resized fluidly below 940px. The code that is setting the size to 940px is line 299 in bootstrap.css. You just need to add the proper rules to resize it at the various breakpoints.
I just finished a rough draft of a site I've been constructing. Unfortunately, I'm starting to notice how poor the design looks both on smaller resolution screens as well as when the user shrinks his/her current screen size.
The site I'm referring to can be seen here. Furthermore, the functionality I'm looking for can be seen on most any professional site, but I especially noticed it on IBM's site. When the screen is minimized the header content stays intact along with the rest of the site. I was looking for overlow: auto somewhere in their css, but I did not see it anywhere.
What can I change to fix this issue?
PS: I figured it would be easier to link to my site rather than posting code here. However, if you want some code just let me know and I'll embed something in here.
Take care,
Evan
#full-height-template-container {
width: 1300px; <----- in your app here now the width is in %
border: 1px solid #262626;
height: 515px;
margin: 0 auto 20px;
overflow: auto;
}
as you see I used the width in pixels, this way the site stays intact. if this is what you need, then it's ok.. if not, let me know and I'll see what else can be done.
IBM.com isnot doing anything noticeably different than you are.
If you want your design to be accessible and usable on different devices, you might consider responsive design. However, be sure it's worth your time. Your users might not be visiting with, say, an iPhone to make it worth your time.
Visually, what about having your menu span horizontally, instead of vertically? And also centering your image to its parent container?
I'm making a small website and I'm very new to CSS but whenever I change the size of the webpage I'm working on nothing stays relative to the size of the screen it's being displayed on. For example, I have text on the right, if I increase my browser size by maximising the text on the right stays in place and is now in the centre of the browser.
One of my images is moving with the webpage size being increased and decreased by dragging the corner of the browser. I use the same CSS code for that image on my hyperlinks list, text box or text in general and it doesn't work at all.
I've researched high and low, I've found some stuff on it but nothing seems to work. I'm getting so frustrated, my site is also local so I cannot even share the link. If anyone doesn't understand what I mean I'll try re-explain it's just quite hard to explain the issue.
Code that works for the image:
img {
padding-top:50px;
display: block;
margin-left: auto;
margin-right: auto;
}
Also, I want to move the hyperlinks to the top left, not have them auto assigned if that makes a difference and I cannot touch the HTML code either, just the CSS. (I'm doing a CSS test to see if I'm able to replicate an image of a webpage already done. I'm not doing this as part of coursework or a test at college/uni, I'm a student but I'm on work placement as a software engineer, this is part time homework for me to self-learn).
you can use the percent notation
for example :
img {
padding-top:50px;
display: block;
margin-left: 10%;
}