I have two DIV's, first one is auto width (the content), second one is fixed width.
When the screen gets too narrow/window scaled, the fixed width DIV goes on the top and becomes 100% width as well. I would like to replicate this, but I want the fixed DIV to go on the bottom, not top, when browser gets too narrow. How can I accomplish this? Thanks.
(Please check in 'Full-Page' mode)
.container-wrapper
{
overflow: hidden;
}
.fixed-right
{
overflow: hidden;
min-height: 100px;
min-width: 400px;
float: right;
}
.auto-left
{
overflow: hidden;
min-height: 100px;
}
.fancy
{
border-radius: 2px;
background-color:lightgray;
margin-left: 5px;
padding: 5px;
}
#media
only screen and (max-width: 764px), (min-device-width: 764px) and (max-device-width: 1024px)
{
.fixed-right
{
float: none;
width: auto;
margin-left: 0px;
margin-bottom: 5px;
}
}
<div class="container-wrapper">
<div class='fixed-right fancy'>
Fixed
</div>
<div class="auto-left fancy">
Auto
</div>
</div>
Try adding this into your #media-query;
.container-wrapper {
display: flex;
flex-direction: column-reverse;
}
Pretty easy, change the order of the Divs in the HTML DOM:
<div class="container-wrapper">
<div class="auto-left fancy">
Auto
</div>
<div class='fixed-right fancy'>
Fixed
</div>
</div>
The float right, will make it as you wanted on desktop
You can use display: flex; on your wrapper. Switch the flex-direction in the two different viewports. Note this solution becomes more flexible if you add more elements to the wrapper, being able to set the order.
Then define the order of the divs.
in the large view you set the right div to order 1
in smaller you set it to 0, that means it will be first (on top)
.container-wrapper {
display: flex;
flex-direction: row;
}
.fixed-right {
overflow: hidden;
min-height: 100px;
min-width: 400px;
order: 1;
}
.auto-left {
overflow: hidden;
min-height: 100px;
}
.fancy {
border-radius: 2px;
background-color: lightgray;
margin-left: 5px;
padding: 5px;
}
#media only screen and (max-width: 764px),
(min-device-width: 764px) and (max-device-width: 1024px) {
.container-wrapper {
flex-direction: column;
}
.fixed-right {
width: auto;
margin-left: 0px;
margin-bottom: 5px;
order: 0;
}
.fancy {
margin-left: 0;
}
}
<div class="container-wrapper">
<div class='fixed-right fancy'>
Fixed
</div>
<div class="auto-left fancy">
Auto
</div>
</div>
Related
I am using the recommended approach from this question https://stackoverflow.com/a/468080/2981429 and have two divs:
#left-pane {
float: "left";
width: "300px";
}
#right-pane {
margin-left: "300px";
}
the left pane takes up a fixed 300px width and the right pane always takes up 100% of the remaining space.
I want to add a "minimum width" to the right pane. When it gets below a width of around 300px I want to move it below the left pane.
When I try actually adding min_width: 300px to the right pane, it just extend invisibly past the boundaries of the page - it doesn't seem to be able to get below the floated left pane.
Codepen
You can use flexbox for your layout.
You can find a good point to start on MDN.
When you use a small device, you can use a media-query to get the divs on column.
For example:
#media (max-width: 600px) {
.container{
flex-direction:column;
}
#left,#right{
flex: 0 1 100%;/* set the width to 100% for the 2 columns */
}
}
.container{
display:flex;
}
#left {
flex:0 1 300px;
height: 300px;
background-color: blue;
}
#right {
flex:1 1 auto;
height: 300px;
background-color: darkred;
}
<div class="container">
<div id='left'></div>
<div id='right'></div>
</div>
that is not a float job. you need flex for this instance.
.container {
display: flex;
flex-flow: row nowrap;
width: 100%;
}
#left-pane {
width: 300px;
min-width: 300px;
}
#media only screen and (max-width: 300px) {
.container {
flex-flow: column;
}
}
using flex gives you a lot of new layout and responsive options, you can read more here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
display: flex;
}
#left {
float: left;
width: 300px;
height: 300px;
background-color: blue;
}
#right {
height: 300px;
background-color: darkred;
width: calc(100% - 300px);
}
#media (max-width: 600px) {
.parent {
flex-direction: column;
}
#left,
#right {
width: 100%;
}
}
<div class="parent">
<div id='left'></div>
<div id='right'></div>
</div>
I am using a theme to which I have added an image header (with our logo). I have called this image "https://www.londonim.co.il/wp-content/uploads/2019/04/logo.jpg". the website address is https://londonim.co.il - it is in Hebrew (regardless).
The div in which "logo.jpg" is situated is inheriting some display from the there (i think "block"), and I would very much like it to be centered.
In order to try and center it i have used margins of 25% but it would not keep its central alignment when displayed in bigger screens (unless in full screen mode).
when i temper with the wrapper's display property it generally disappears or loses the alignment altogether. Any thoughts please?
theme header:
<div class="cutewp-container" id="cutewp-header" itemscope="itemscope" itemtype="http://schema.org/WPHeader" role="banner">
<div class="cutewp-head-content clearfix" id="cutewp-head-content">
<div class="cutewp-outer-wrapper">
<div class="cutewp-header-inside clearfix">
<div id="cutewp-logo">
<div class="site-branding">
<a href="https://www.londonim.co.il/" rel="home" class="cutewp-logo-img-link">
<img src="https://www.londonim.co.il/wp-content/uploads/2019/04/logo.jpg" alt="" class="cutewp-logo-img">
</a>
</div>
my tweaks:
/* homepage tweaks */
.cutewp-main-wrapper {
position:relative!important;
margin-left:12.5%;
margin-right:12.5%;
}
#cutewp-logo {
margin-left:25%;
margin-right:25%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#cutewp-primary-navigation {
text-align: center;
text-align: -webkit-center;
}
#cutewp-header {
text-align: center;
text-align: -webkit-center;
}
.menu-main-container {
margin-left: 25%;
}
Thanks in advance for the help!
The best solution is to:
#cutewp-logo {
margin-left:25%;//delete this
margin-right:25%;//delete this
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;//delete this
width: 100vw;//add this
}
The element isn't centering because it doesn't occupy the full width of the screen therefore has no reference on to be centered to
You need to clear out a few of those margin-left and margin-right
CHANGE
#cutewp-logo {
margin: 5px 0px 5px 0px;
float: left;
width: 41%;
}
.cutewp-main-wrapper {
position: relative!important;
margin-left: 12.5%;
margin-right: 12.5%;
}
#media only screen and (max-width: 890px) {
#cutewp-header {
margin-left: 25%;
background-color: white;
}
.cutewp-content-wrapper {
margin-left: 25%;
}
}
TO
#cutewp-logo {
margin: auto;
}
.cutewp-main-wrapper {
position: relative!important;
}
#media only screen and (max-width: 890px) {
#cutewp-header {
background-color: white;
}
.cutewp-content-wrapper {
margin: auto;
}
}
This will fix the issue on both your desktop and mobile view.
I want to center a div and it's text, in a 100%-screen-width div, which is in a smaller wrapper.
.wrapper {
height: 800px;
width: 900px;
margin: auto;
background-color: #000000;
}
.box-wrapper {
width: 1000%;
position: relative;
left: -500%;
background-color: #FF6600;
}
.box {
background-color: #FF0000;
width: 600px;
position: relative;
left: 50%;
color: #00FF00;
}
span {
text-align: center;
display: block;
}
<div class="wrapper">
Random text for wrapper-div
<div class="box-wrapper">
<div class="box">
<span>ABC</span>
<span>DEF</span>
<span>GHI</span>
</div>
</div>
</div>
This code is kind of working but not perfect.
The red div should be moved a bit to the right, also the way
of doing it is not the best in my opinion.
I want a more robust and responsive solution.
To be more clear, it's for the pink division on the bottom
of this website: http://ndvibes.com
There the code is working 99% of the times and reponsive. But on some computers/screens it's 50% off. So I want a less-hacky (without transform etc) and more standard, robust way of getting that effect.
Wrapper 900px > 100%-screen-width coloured div > Centered text in that coloured div.
How can I achieve this the best as possible?
Thanks!
How about this approach, using absolute positioned pseudo elements. The outer-space div with overflow:hidden is to prevent a horizontal scroll bar appearing. I have added padding-top to the .wrapper just so you can see the snippet running in full screen mode.
body {
margin:0;
}
.outer-space {
overflow: hidden;
padding-top:80px;
}
.wrapper {
height: 800px;
width: 100%;
max-width: 900px;
margin: auto;
background-color: #000000;
}
.box {
background-color: #8904B1;
margin:0 auto;
color: #ffffff;
position: relative;
z-index: 2;
padding:10px 0;
}
.box-wrapper {
position: relative;
width:100%;
max-width: 600px;
margin:0 auto;
}
.box-wrapper:before, .box-wrapper:after {
content:"";
position: absolute;
height:100%;
width:100vw;
background-color: #8904B1;
top: 0;
z-index: 1;
}
.box-wrapper:before {
left:-100%;
}
.box-wrapper:after {
right:-100%;
}
span {
text-align: center;
display: block;
}
<div class="outer-space">
<div class="wrapper">
Random text for wrapper-div
<div class="box-wrapper">
<div class="box">
<span>Crazy full width window</span>
<span>absolute positioned pseudo elements</span>
<span>with centered content div and centered text thingy</span>
<span>all inside of a fixed width page wrapper!</span>
<br><span>““”̿ ̿ ̿ ̿ ̿’̿’̵͇̿̿з=(•̪●)=ε/̵͇̿̿/̿ ̿ ̿ ̿ ̿’““</span>
</div>
</div>
</div>
</div>
To center child element, add the following to the parent wrap will center all child.
display: flex;
align-items: center;
justify-content: center;
If you want 100% screen width, use viewport (100vw) for 100% screen width
viewport
The #viewport CSS at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
REF: #viewport
REF: Viewport Sized Typography
body {
margin: 0;
}
.wrapper {
height: 800px;
width: 900px;
margin: auto;
background-color: #000000;
}
.box-wrapper {
width: 900px;
max-width: 900px;
position: relative;
background-color: #FF6600;
display: flex;
align-items: center;
justify-content: center;
}
.outer-wrapper {
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 80%;
background-color: #FF0000;
position: relative;
color: #00FF00;
}
span {
text-align: center;
display: block;
}
<div class="outer-wrapper">
<div class="wrapper">
<p>Random text for wrapper-div</p>
<div class="box-wrapper">
<div class="box">
<span>ABC</span>
<span>DEF</span>
<span>GHI</span>
</div>
</div>
</div>
</div>
I'm not really sure if I need a wrapper to delimit the max-width of the container.
The header has a 100% width, and the .wrapper delimits to a 1000px max width.
Is there any way to avoid using the .wrapper div?
body { margin: 0; }
header {
margin: 0;
padding: 0;
background-color: DarkRed;
}
.header-wrapper {
margin: auto;
max-width: 500px;
padding: 10px 0;
}
#logo, #tagline, #menu {
margin: auto;
padding: 5px;
}
#logo {
flex: 2;
background-color: Crimson;
}
#tagline {
flex: 5;
background-color: Salmon;
}
#menu {
flex: 3;
background-color: IndianRed;
}
#media (min-width: 768px){
.header-wrapper {
display: flex;
}
}
<header>
<div class="header-wrapper">
<div id="logo">Logo</div>
<div id="tagline">Tagline</div>
<div id="menu">Menu</div>
</div>
</header>
CodePen
This will depend on your exact needs, there's no fast rule about your exact html structure when it comes to designing a page.
If you want a background color that extends the entire 100% width but you want the content to have a hidden left/right barrier, you probably want a wrapper to force that barrier rule. otherwise, the red background will only be as wide as the 1000px rule (or whatever you set your centered bounds to)
if you don't need a barrier and want the content/nav items to span the entire width, then you don't need a wrapper.
again, it's really up to you depending on the overall design of the component
Set all div max-width, which is equal to 1000px
what you did looks like your wrapper will always be 500px according to mediaqueries, so width of each elements are static.
You can modify your mediaqueries and remove the extra wrapper and the flex values.
Snippet below behave just like your codepen ... with a wrapper less :
body {
margin: 0;
}
header {
margin: 0;
padding: 0;
background-color: DarkRed;
padding: 10px 0;
}
#logo,
#tagline,
#menu {
padding: 5px;
}
#logo {
background-color: Crimson;
}
#tagline {
background-color: Salmon;
}
#menu {
background-color: IndianRed;
}
#media (min-width: 768px) {
header {
display: flex;
justify-content: center;
}
#logo {
width: 100px;
}
#tagline {
width: 250px;
}
#menu {
width: 150px;
}
}
<header>
<div id="logo">Logo</div>
<div id="tagline">Tagline</div>
<div id="menu">Menu</div>
</header>
http://codepen.io/gc-nomade/pen/ENqPVp
i have this HTML
<div class="flex-container">
<div class="flex-full">1</div>
</div>
<div class="flex-container">
<div class="flex">2</div>
<div class="flex">3</div>
<div class="flex">4</div>
</div>
Styled by this CSS
*{
margin:0;
padding:0;
}
.flex-container{
width: 90%;
max-width: 960px;
display: flex;
background-color: lightgray;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
}
.flex-full{
background-color: red;
flex: 1 0 100%;
}
.flex{
background-color: blue;
flex: 1 0 90px;
}
#media screen and (max-width: 480px) {
.flex-container {
background-color: lightgreen;
width: 100%;
}
}
#media screen and (max-width: 480px) {
.flex-container {
background-color: lightgreen;
width: 100%;
}
}
But the result is not as intended. i will try to give a visual presentation of the problem(upload image wont work):
On screen width 320px and below, i get the following result
111111111111111
222222233333333
444444444444444
What i expected was:
phone screen bigger screen
111111111111111 111111111111111111
222222222222222 222222333333444444
333333333333333
444444444444444
I hope it made sence, please help me out :)
JSFiddle
Are you maybe looking for flex-direction: column;?
on .flex-container.
In Flex, you may use justify-content and align-content for horizontal and vertical alignment, respectively.
Also flex-basis takes the same values as the width and height properties, and specifies the initial main size of the flex item, before free space is distributed according to the flex factors.
.flex-container {
flex-direction: row;
justify-content: space-between;
align-content: space-between;
}
.flex1, .flex4{
flex-basis: 100%;
}
.flex2, .flex3{
flex-basis: 50%;
}
#media screen and (max-width: 320px){
.flex2, .flex3{
flex-basis: 100%;
}
}
You may also use width: 100% and width: 50% instead if flex-basis.