Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I took a WP theme and have customized it for my needs. I have got into a issue now with CSS.
It looks fine on full size
However when resized or when viewed on iPad, the header is getting distorted. As you can see the RSS icon on the top right has gone past the colored header.
Any pointers in this regard would be appreciated.
Please let me know if you need some more information.
In case you need to check with Firebug/other inspector tool, here is my site
If a block overflows, it does not scale the parallel ones. Putting div#header div#menu and div#footer into div#content parallel to the container should solve the issue.
CSS alternative way:
Add floated fixing to the container and all childs, in this case:
#top-overlay, #header, #menu, #content, #footer {
float: left;
min-width: 100%;
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
On this website I would like to fit the picture for the entire div width.
(If you scroll down you'll see the blog section)
As you can see from the picture there are some white space on left and right.
How can I achieve this?
Note: I can't edit the HTML structure of the website. I can only work via CSS or JS.
Many many thanks
You only have a max-width: 100%- So if you set width: 100% it'll work, like so:
img.scale-with-grid, #Content img {
max-width: 100%;
height: auto;
width: 100%;
}
As can be seen here (updated css in chrome devtools.)
Just give img.scale-with-grid, #Content img : width:100%
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Currently on our company website, there is no max width set. Therefore, no matter the size of the screen you're looking at it on, it will try and extend to that width. I would like to change that so it stops expanding at a certain max width -- say 1600 pixels wide.
I hope that someone can assist me with this code.
http://visualicreative.com/industries/non-profit/
You can try adding this line in responsive.css (last line):
#page, #main { width: auto; max-width: 1600px; margin: 0 auto;}
It will basically set a max-width and center the #main and #page element.
Seeing the code on your website, I'm not sure that will set a max-width to all your website. It's a really choatic piece of code.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
There is an extra 20 or so pixels on the righthand side of a site I am developing. I've been combing over the CSS and can't seem to find out why.It's not so noticeable when looking at it on a computer unless you scroll over. It is apparent on a mobile devices. You can see a live example here http://gregtregunno.ca
In footer{ in your css, change
padding:10px;
to
padding:10px 0;
It's the padding that's throwing it out.
Line 472 in your CSS.
Because you set the width of the footer to 100% plus gave it padding. Either remove the padding, or add the rule box-sizing: border-box; to the footer rules.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 9 years ago.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Improve this question
I know this is quite a simple question but I am a beginner. I am looking for a tutorial which can teach me how to code a design such as this one: http://dsp.io/. Can anybody recommend me one?
I want to know how to make it take up the entire browser's window, regardless of what size the screen on which you view the website is.
Thank you very much in advance.
This is called Fluid Design.
If you are a beginner, try to use Bootstrap.
Check this reference link
http://bootply.com/60257
Fluid grid system will change as Mobile template if you zoom the browser, and expands automatically if you zoom out filling the entire screen.
Bootstrap 3 is released. Check out that!
Hope this helps, comment if any doubt.
Here you'll have a tutorial on how to make a responsive website: http://www.netmagazine.com/tutorials/build-basic-responsive-site-css
Basically, you'll have to wrap everything within the <body> </body> tags into a #wrapper, like this:
<div id="wrapper">
and set the width to 100% in your css file, like this
#wrapper {width:100%}
The website you've mentioned doesn't have "full width and height", otherwise it wouldn't be scrollable; this is just 100% width.
If you want full width and height, though, you just have to create a wrapper div and set those properties to 100%:
#wrapper
{
position: absolute;
width: 100%;
height: 100%;
}
Then remove undesired margins and paddings from the page:
html, body
{
margin: 0px;
padding: 0px;
}
This is very basic stuff, you should really study and search more before asking questions. Here's a good start.
Here is a great book on Responsive Design by Ethan Marcotte. You can read it to understand how to make a resposive site.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 8 years ago.
Improve this question
I just can't shake this page moving into the footer.
Site is: https://raiderwriter.engl.ttu.edu/super/onecolumn.asp
The #wrapper div is supposed to push a 70px margin down onto the footer, I think? I just want the footer to float below.
Argh.
Your #wrapper DIV has
margin-bottom: -70px
Remove that declaration.
Btw, debugging CSS is pretty straight forward. Just select the problematical element in the browser's dev tools and inspect its applied CSS styles. Then you can disable individual styles to see what changes that produces on the page.