I have problem in rescaling my page according to the screen. I am doing coding in my laptop, where it seems ok, But when I open this page on desktop with wider screen it doesn't look nice.
div.fullWidth {
width:100%;
height:100%;
}
This is what I am trying in my CSS file, but it is also not working.
Use CSS3 and stay trouble free :
div
{
resize:both;
overflow:auto;
}
(or) without CSS3
Just drop you width and :
body{
position: absolute;
margin: 0 auto;
}
height: 100% will not work, try using 100vh
div.fullWidth {
width:100%;
height:100vh;
}
Browser support here
if you create an adaptive design that will help you bootstrap framework, but if you create a fixed design is the main wrapper is necessary to specify the width like this
<div class="fullWidth"></div>
.fullWidth {
display: block;
background: #ddd;
margin: 0 auto;
height: 500px;
width: 100%;
min-width: 960px;
}
Related
Please help, I have been stuck on this. I found many solutions online but not of them work in my case.
I'm trying to center the table. Here is how it looks now:
HTML:
<div class="container">
<table id="multTable"></table>
</div>
CSS:
#multTable {
width: 100%;
margin: 0 auto;
display:block;
height: 200px;
overflow-x:scroll;
overflow-y:scroll;
}
I tried this:
.container {
width: 100%;
}
#multTable {
margin: 0 auto;
height: 200px;
overflow-x:scroll;
overflow-y:scroll;
}
But the table overflows the page size:
What am I doing wrong here?
In your initial try, your table won't be centered since you're trying to center something that is taking 100% of the possible space. Technically, it is centered, you just can't see it's taking the entire space.
So imagine if you have a container of 100px. There's a block inside of this container that you want to center. But you're setting this block to have 100px in width. There's just no gap to see!
So this won't work:
{
width: 100%;
margin: 0 auto;
}
Instead, you should give the centering element a fixed width:
width: 400px; /* or whatever is needed */
margin: 0 auto;
That way it has some space around it.
Here, check this out:
https://jsfiddle.net/9gwcjvp3/
have you tried this :
.container {
//
}
#multTable {
margin: 0 auto;
overflow-x:scroll;
overflow-y:scroll;
}
Make your container the full width of whatever it resides in. Then make the table and specify a max-width.
.container {
width: 100%;
}
#multTable {
max-width: 100%;
}
I would help more to see the rest of your hml.
Only add this
.container {
display: flex;
justify-content: center;
}
I am using blog spot default layout, what i want to make to create full Page (100%) width Page. Not sure where do i include css / js in http://webimportance.blogspot.in/
<style>
.main-inner {
width:100%;
border:2px solid #f00;
}
</style>
Appreciate your help
Thanks!
You have this class: content-outer
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: 960px;
max-width: 960px;
_width: 960px;
}
You need modify to get the 100% for example:
.content-outer, .content-fauxcolumn-outer, .region-inner {
width: 100%;
}
I am developing a website using ASP.NET MVC5 and Bootstrap : www.devadelic.com
My problem is that the banner is not using the entire div's width to display, as you can see there are space on each side.
I tried :
.img {
width: 980px; //div width
margin-left:-20px; //because i don't know why it's not centered
max-width: 100%; <= delete
height: auto;
vertical-align: middle;
border: 0px none;
}
Then my banner is displaying well entirely in the div but, it's not responsive anymore.
And I don't know what to do anymore. Any ideas?
I think you should add "margin:0 -20px" to your class "logo" so it will become
.logo {
margin: 0 -20px;
text-align: center;
}
Please try this one:
.img {
margin: 0 -20px;
text-align: center;
}
Yo want to be using minimum-width not maximum...
.img {
min-width: 100%;
display:block;
margin:0;
}
I'm trying to learn designing a website.
Is there any way I can set my whole page width to 1000px with the current responsive sticky footer I have?
If possible, on top of the condition mentioned above, I want the left and right div to be horizontally align and the div will become vertical align when the screen collapse.
Here is my html/css code:
JSFiddle
Add max-width:1000px; to the .wrapper class and make the .content class float:left
.wrapper {
margin: 0;
height: auto;
max-width:1000px; /*add this line*/
}
.content {
background-color: slateblue;
width: 500px;
float:left; /*add this line*/
}
Demo at http://jsfiddle.net/Sp2ZW/
you mean something like this?:
http://jsfiddle.net/S3hMH/1/
html, body {
margin: 0 auto;
display: table;
height: 100%;
width: 100%;
width: 1000px;
}
.content {
background-color: slateblue;
width: 500px;
display: inline-block;
float:left;
}
Fiddle
If you are relatively new to responsive design i suggest using a framework as
Foundation
bootstrap
Coming to your questions.
Ya You can set your page-width to 1000px.
#wrapper{
margin: 0 auto;
width: 100%;
max-width: 1000px;
}
.content{
width: 50%;
float:left;
}
#media screen and (max-width: 480px) {
.content{
width:100%;
}
}
Content will occupy 100% width and stacks horizontally if the screen resolution is less than 480px because of the query above.Using % width helps you when designing responsive web pages
I'm trying to have the background colour of one post expand the width of the browser but to no avail.
This is the site
I've tried
.content-wrapper, #yui_3_10_1_1_1384098450067_262{
background: black;
position: absolute;
width: 1200px;
}
and
.content-wrapper, #yui_3_10_1_1_1384098450067_262{
background: black;
position: aboslute;
width: 100%;
}
but that affects the whole post and shifts it to the left.
Where am I going wrong?
If I'm understanding your question correctly, you need to add the following to your CSS:
body {
margin:0;
}
Instead of absolute, use 'relative'. Set your width to 100%.
Add the following CSS at the end of your CSS file (or find these rules in your code and amend them to the following):
#site {
padding: 130px 0;
}
#canvas, .content-wrapper {
max-width: none;
}