When I resize my webpage everything goes out of position. The text goes below the container and the image get too wide. How can I make it so everything stays in place when the image gets resized? I looked at a few solutions but none seemed to work for me. Any help would be appreciated!
body {
background-color: #ADD8E6;
padding: 10px;
margin: 0;
}
.hcontainer {
background-color: #FFFFE0;
height: 600px;
text-align: center
}
div h1, p {
padding-top: 10px;
padding-left: 10px;
padding-bottom: 5px;
margin: 0;
}
img {
margin: 0;
padding-top: 20px;
}
#mini {
font-size: 13px;
margin-top: 5px;
}
.imgcontainer {
background-color: pink;
}
.mcontainer {
background-color: #FFFFE0;
height: 600px;
margin-top: 20px;
padding-top: 30px;
}
li {
margin-top: 30px;
margin-left: auto;
margin-right: auto;
}
h3 {
text-align: center;
}
.list {
width: 50%;
margin-left: auto;
margin-right: auto;
}
h4 {
text-align: center;
padding-top: 20px;
Use percentages instead of px, this will make any elements a relative size when resizing the window.
Use percentages instead of Pixels, And be careful the width of all the components companied should be 100%.
So all the components width, the paddings, the margins even the borders counts! All companied should be 100% at the width.
Note: if you want to use borders is make sense more to use pixels so if you set the border for 1px for example you make the other components width companied 99%.
Another thing I recommend to you to learn and use Bootstrap to make responsive website to all platforms.
Related
I am having an issue with the web page display on iPad. The last div jumps out at the bottom when viewed in iPad (landscape mode). See screenshot below
Here is the CSS.
div .container-home
{
float: left;
width: 290px !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
I would really appreciate any help.
Many thanks!
Are you including a viewport?
Its because of float left and the width of them together is more than the display. You define their width for 290px and also a padding of 20px which means they're 330px and you will need a display width of 1320px at least.
Try using a gridsystem for them or give them a width value in per cent.
If you don't know what gridsystem to use, I recommend Skeleton because it is very light.
EDIT: Don't use !important because then you cannot change the value anymore !important will overwrite any other rule
Don't use hard value for width, example
div .container-home
{
float: left;
width: 20% !important;
padding: 20px;
}
img.section-icon
{
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
max-height: 150px;
}
h2.section-head
{
text-align: center;
line-height: normal;
font-size: 22px;
}
p.section-description
{
text-align: center;
}
explainmehow.com
The white boxes in the middle of the screen, which have text in them, are not centered. You can see it extra clear, if you make your screen really small.
White box:
.step {
background-color: white;
width: 90%;
margin: 0 auto;
margin-top: 15px;
margin-bottom: 15px;
padding: 20px;
color: #303030;
display: block;
float: left;
}
Change width: 100%; to width: 90%; so you aren't extending the page by adding margin-right/left:5% and set padding:15px; to padding: 15px 0; so only top and bottom gets padding:
#contentholder {
background-color: #eeeeee;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 90%;
}
Then:
Get rid of float:left on the class .step. Boom it is all centered.
The CSS of the main content div is this:
#contentholder {
background-color: #EEEEEE;
padding: 15px;
margin-left: 5%;
margin-right: 5%;
min-height: calc(100vh - 210px);
width: 100%;
}
Take a look at the box model. The width, padding, and margin together make it so that the total width of the element is larger than the width of the screen. The white boxes inside that element are centered properly though.
So, the problem isn't the white boxes, the problem is the parent element.
I have this url:
oios.kemne.com
when I visit this in the mobile I get this:
The relevant html segment is as follows:
<div class="focus">
<div id="f_image">
<img src="/assets/6112e42e/images/man.jpg"></img>
</div>
<div id="text4">
<div id="f_heading"></div>
<div id="f_tex1"></div>
<div id="f_tex2"></div>
</div>
</div>
is the container.
is the image holder.
is the header.
is the column 1.
is the column 2.
The relevant css styles are as follows:
#f_image {
width: 35%;
height: 111px;
float: right;
margin-top: 12px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
.focus {
height: auto;
background-color: #DCDDDE;
float: left;
margin-top: 20px;
margin-right: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#text4 {
width: 60%;
height: auto;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_heading {
width: 80%;
height: 30px;
font-size: 15px;
color: #1A6EB4;
margin-left: 10px;
margin-top: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_tex1 {
width: 46%;
height: auto;
float: left;
font-size: 10px;
text-align: left;
margin-left: 10px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
#f_tex2 {
width: 46%;
height: auto;
float: left;
font-size: 10px;
text-align: left;
margin-left: 20px;
}
* {
margin: 0px;
padding: 0px;
color: #333;
font-family: Arial,Helvetica,sans-serif;
}
As can be seen from the mobile (note3), the styles are completely messed up. The image spill over the containing div and the heading overlap the column1.
If I remove the width attribute from the #f_image, then the image fits inside the containing div (.f_focus). But the problem is that, it affects the rendering in desktop browser. I can probably use two separate stylesheets for desktop and mobile. But then it would require a lot of rewriting and duplication and the styles would be scattered. More importantly, the logic of the layout is very simple - the image is 35% of the containing div. So if the containing div resizes in the mobile or any other screens, then the image should resize automatically. The fact that removing the width fits the image inside the containing div also bears testimony that there are enough room to accommodate the image. For the rest of things, ie the overlapping of the header with the column, I am not quite sure of the reason of it failing.
I am completely clueless. I even tried to debug the mobile version using firefox remote debugger. So please help me with resolving this.
Many thanks in advance.
You can use the CSS3 #media-queries over here. I don't know the width at which you'd like the mobile styles to take over the desktop styles but just for an example, I am using 768px as the width after which the mobile styles will take over the desktop styles.
#media (max-width: 768px) {
#f_image img {
width: 100%;
}
#f_heading {
height: auto;
}
}
Please place the above styles at the bottom of your stylesheet and then try viewing the website on your mobile device or try resizing your browser window to less than 768px.
I am trying to convert an existing site into responsive however there is one thing I'm struggling with here:
http://www.brandonsuffolk.com
When you resize the window I want the right column to squash the left one, however at the moment it drops underneath (however once the screen hits the other left div it will change).
When I do it with single divs it works, however as soon as I add a new div inside it, it won't work properly.
Here is the relevant CSS:
.MainOuter {
float: left;
width: 100%;
}
.MainWrapper {
max-width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
.ColumnRight {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
float: right;
width: 290px;
padding: 0px;;
}
.ColumnLeft {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
width: auto;
max-width: 670px;
padding: 0px;
}
I'm afraid you're fighting the normal process of responsiveness. responsiveness is supposed to do just what it's doing. If you don't want it to drop under, find the #media for this element and change it to:
#media (min-width:0px) {
width:50%;
}
This may help
Assuming I understood, and you want the right-side column to maintain the fixed width, you'll need to use position:absolute with a left and right value, and width set to auto. This gives you a fixed side and a side that takes the rest of the screen.
Wanting it to only apply after they touch though, is where you'll have to use a media query. Set the media query to apply only when the screen is lower than 1000px, which will tell the left column to change there and become flexible.
EDIT
Try adding this CSS to your site's CSS file, at the end. Additionally I've updated the Fiddle to show how that it works. You might have to tweak the numbers a little, but it'll do what you need.
Example Fiddle
#media screen and (max-width: 1000px) {
.ColumnLeft {
position: absolute;
left: 20px;
right: 320px;
width:auto;
}
}
May this is what you mean with "squash" ?
http://jsfiddle.net/7QVVz/
CSS
.wrap {
display: table;
width: 100%;
}
.left {
display: table-cell;
border: 1px solid green;
width: 350px;
max-width: 350px;
}
.right {
display: table-cell;
border: 1px solid red;
}
.right > .text {
width: 200px;
float: right;
border: 1px solid yellow;
}
HTML
<div class="wrap">
<div class="left">LEFT</div>
<div class="right">
<div class="text">RIGHT TEXT</div>
</div>
</div>
I'm writing a small website to learn HTML and CSS and I'm having trouble getting my content to scroll in any direction.
When the browser window is resized to the point where any of the content cannot fit, instead of allowing a scroll, it just disappears. The Login button's div is supposed to appear 950px from the left. Meaning that if the browser window is smaller then that, it will allow you to scroll over, right?
And the News box will display any content written until it reaches the bottom of the browser window. Then it won't scroll or display.
Any suggestions?
The HTML is here is here and the CSS is here.
Your CSS has many position:fixed attributes in it. When an object's position is set to fixed, it will stay stationary, even if you are scrolling. Therefore, there was nothing that can move, so you couldn't scroll. Try changing your CSS to the following:
body {
background-color: #222222;
overflow: auto;
color: #ffffff;
font-family: verdana, sans-serif;
}
a { color: #ffffff; }
a:visited { color: #ffffff; }
#page_header {
margin-top: 55px;
margin-left: 100px;
font-size: 50px;
}
#user_info {
/*right: 50px;*/
left: 950px;
top: 60px;
position:absolute;
}
#user_info a {
padding: 15px;
text-decoration: none;
font-size: 35px;
}
#user_info a:hover {
background-color: #606060;
}
#boxes {
margin-top: 100px;
margin-left: 100px;
}
#left_content_box {
padding: 20px;
background-color: #00cdcd;
width: 600px;
float: left;
}
#left_content_box header {
top: 15px;
left: 50px;
font-size: 25px;
}
#left_content_box section {
padding: 10px;
}
#left_content_box section header {
padding-top: 25px;
position: relative;
font-size: 20px;
left: 0px;
}
#left_content_box section p {
position: relative;
top: 20px;
left: 10px;
font-size: 15px;
overflow: auto;
}
This will keep everything in the same position as it was, except the page can now scroll when the browser is resized to a point that it cannot display all its contents.