How can i fix this issue? Everything is ok in desktop version but in mobile version pages overlap. Dont know what to do :D
enter image description here
Code:
Appreciated if you show us a little of your code to know your scenario. Anyways I think I have got what you need.
Use containers relative positioned inside an absolute container. Give them a width. Make them float left.
Use #media tags to resize them when you desire to change.
It is the right way to work. First you define for small devices then resize if larger. And you use relative positioning when you desire wrap normal (not flex) boxes.
I give you an example. I begin giving 100% width for small devices and I resize to 50% for larger screens (In the example im doing the change at 500px but you can use other). Give a look. Run the snippet on fullscreen to see the change and resize your browser screen to the minimum. Or copy paste the code and try it.
Your containers appearently seems absolute positioned.
.absolute {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
.one {
display:block;
float:left;
text-align:center;
position:relative;
width:100%;
height:50px;
background:#f1f0f1;
}
.two {
display:block;
float:left;
text-align:center;
position:relative;
width:100%;
height:50px;
background:#a0aca0;
}
#media only screen and (min-width:500px) {
.one, .two {
width:50%;
}
}
<div class="absolute">
<div class="one"> PEACE </div>
<div class="two"> IN THE WORLD </div>
</div>
Related
I'm working on a personal website, not a responsive website but i just want to have same "layouting" at least between different screens (not mobile).
For example :
<div class="first-div">
<div class="second-div"></div>
</div>
CSS looks like :
.first-div{
width:100%;
height:100%;
background-color:blue;
}
.second-div{
width:1380px;
height:1000px;
background-color:red;
}
When i test this in my 13" screen the red (second div) is quiet, but, in another laptop (even 13") i have to scroll horizontally to see all the second div (the red one).
My question is what is the good width to set even if i do not want a responsive design ?
I guess by using the words same "layouting" and same “width” you mean percent sizing.
if you change your css to this for example and give the first div a position: relative:
.first-div{
width:100%;
height:100%;
background-color:blue;
position: relative;
}
.second-div{
width:95%;
height:95%;
background-color:red;
}
you'll almost get the same layout in every screen, so that for example the first div fills the whole screen and the second one gets only 95%
You can try
.first-div{
width:100%;
height:100%;
background-color:blue;
}
.second-div{
margin:0px auto;
width:98%;
height:98%;
background-color:red;
}
If you're going on fixed width, some screens will have to scroll.
You're mixing relative and fixed here.
If you want to make sure it doesn't go over a certain limit, use max-width, and accept that some screens won't work as expected.
Can't seem to get this. I have a div that is responsive using vw and vh units, and I'm trying to have a button stay in the bottom right of the div regardless of the screen size.
However, the button moves in and out of the parent div, as the browser window changes size. How can I fix this problem?
#flexiblediv {
width:50vw;
height:50vw;
background-color:red;
margin-left:50px;
}
#insidediv {
height:45vh; /* I need this div, not sure what units to use with it. */
}
#testbutton {
float:right;
}
<div class="row" id="flexiblediv">
<div id="insidediv"></div>
<button id="testbutton"> Test</button>
</div>
jsfiddle
Pretty straightforward:
#flexiblediv
{
position:relative;
}
#testbutton
{
position:absolute;
right:0px;
bottom:0px;
}
So I have divs that I have within my webpage .. like header , or div boxes .. they adjust fine on bigger screen sizes so that they dont look too tiny on a big monitor , but the issue is that when I resize the window or browser to make it small , all the elements move along till they reach a point where they all meet and it gets ugly .. How can I make it so the divs I have adjust to bigger screen sizes becoming bigger as well , but then stop them from moving along with the window when resizing the window making it smaller ??? I used percentages from all the elements I want to readjust and make bigger on bigger /wider screens
Below is an example of my code .. my header and other elements with these classes move to the point where they overlap when resizing the window
.header{
position:absolute;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:absolute;
top:60%;
left:40.5%;
}
.login{
position:absolute;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
I'm not sure about your question because you didn't post any code but i think that your solution can be using css style:
max-width:50%;
min-width:800px;
max-height:500px;
min-height:21%;
properties in pecentage or pixel as you prefer, so you can tell divs how much expand and how much get smaller.
Hope it helps, if you post your code maybe i can be more useful.
Regards
EDIT 1:
This should resolve your problem:
*{
margin: 0;
padding: 0;
text-decoration: none;
color: inherit;
}
.header{
position:relative;
float:left;
top:0px;
width:100%;
height:100px;
left:0;
background:#EB6A4A;
}
.slogan{
position:relative;
float:left;
top:60%;
left:40.5%;
}
.login{
position:relative;
float:left;
top:15%;
left:90%;
}
.whitebackground{
background:#FFFFFF;
}
Just do the same with the class you didn't poste in css. The idea is having all items with position relative and floated on the left so they don't move. Should work!
So I'm putting together some alert system for a website I'm building. Layout is pretty simple:
<style>
#alert{
position:absolute;
padding:10px;
display:table;
margin:0 auto;
}
</style>
<div id="alert">
Hey user, I have a very important message for you.
</alert>
Now, if an element isn't absolutely positioned I normally use display:table to make sure it only takes the necessary amount of width, but absolutely positioning it kind of ruins that.
Is there a way to make it so that the element only takes the necessary amount of width, but still be absolutely positioned?
EDIT:
Basically what I am looking for is an absolutely positioned element that has dynamic width, and is centered.
This seemed to do the trick:
<style>
#alert {
position:absolute;
width:100%; /* Keep in mind this is for an entire page */
height: 16px; /* Match the font-size of the alert */
text-align:center;
cursor:pointer;
}
#alert #inner_alert {
display:inline-block;
padding:10px;
}
</style>
<div id="alert">
<div id="inner_alert">Here is the message!</div>
</div>
This will produce a centered element that will only be as wide as it needs to be and is absolutely positioned.
Hey now you can used left or right properties as like this
#alert{
position:absolute;
padding:10px;
left:0;
right:0;
top:0;
bottom:0;
}
hey now you can define your value in left right top bottom as according your layouts
if you define position absolute than define your div width or height
now you can used this one live demo http://jsfiddle.net/YvMAJ/
I need to fit an image inside a 300x300 div without stretching the image. I've seen this on the huff post, the slider on this page :
http://www.huffingtonpost.com/2012/01/07/katy-perry-divorce_n_1191806.html
The images are clipped but not stretched.
Instead of using max-width, max-height.
How do I do this?
Those images on the site you linked to are actual size, so the simple answer is just to resize the image.
You can't really do this without "stretching" the image if the image happens to be less than 300px wide or tall, but you can do it without changing the ratio, which is what I think you mean.
Here's the basic idea:
<div><img></div>
If you want to use 300px as a minimum width (you expect small images that need to be bigger), try this:
div {
width:300px;
height:300px;
overflow:hidden;
}
div img {
min-width:100%;
}
Demo: http://jsfiddle.net/Z47JT/
If you want to clip images (because you expect them to be big) but not enlarge them, try this:
div {
width:300px;
height:300px;
overflow:hidden;
position:relative;
}
div img {
position:absolute;
}
Demo: http://jsfiddle.net/Z47JT/1/
Combine both these techniques if you want.
Another way is to simply use background-image on the container instead, but resizing it (if you want to stretch smaller images) will be difficult unless you use background-size which isn't fully supported. Otherwise, it's a great easy solution.
Use the flex box solution
Here is the html,
<div><img /></div>
Add styles
div{
width:100%;
height:250px;
display:flex;
justify-content:center;
align-items:center;
overflow:hidden
}
div img{
flex-shrink:0;
-webkit-flex-shrink: 0;
max-width:70%;
max-height:90%;
}
simple way to do this....
.div {
background-image: url(../images/your-image.png);
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}