i've designed a page with a div and two child div, disposed in line. One left, one right.
I'd like to reposition the two child div in a responsive design. How can I do?
I've created the page with this HTML:
<div id=contenitore class=clearfix>
<div class="imgsx"> Content </div>
<div class="txtdx"> Content.</div>
</div>
This is the CSS.
#contenitore {
position:relative;
}
.txtsx {
width:60%;
float:left;
}
.imgdx {
width:40%;
float:right;
As far it works well.
When I use a rule for responsive it doesn't work. My need is to put the div txtsx above the txtsx, full screen on mobile devices.
this is the CSS I've used:
#media screen and (max-width: 60em)
#contenitore {
clear: both;
padding: 0px;
margin: 0px;
}
.txtsx {
width:100%; !important
}
.imgdx {
width:100%; !important
This does what you asked for:
CSS:
#contenitore {
position:relative;
}
.imgsx {
width: 60%;
float: left;
}
.txtdx {
width: 40%;
float: right;
}
#media all and (max-width: 200px) {
.txtdx, .imgsx {
width: 100% !important;
}
}
Fiddle: http://jsfiddle.net/Hive7/MP3qP/2/
Normal CSS float both on left...
#contenitore {
position:relative;
}
.txtsx {
width:60%;
float:left;
}
.imgdx {
width:40%;
float:left;
}
In query resize float them right
#media screen and (max-width: 60em) {
.imgdx, .txtsx {
float:none;
width:100%;
}
}
Is what I think you're asking for...
Related
I have a slick-menu, a logo, and a search element in my top bar. Unfortunately, I cannot figure out how to make them all clickable at the same time within both my tablet and mobile responsive. Because of a z-index, I think they are stacked/transparent--which is the issue. I can only either make the menu + search clickable or the logo. I've tried changing them to inline-block on each element, tried the pointer-events property, and also changing around the z-index values, but nothing has been successful. How do I fix this?
You can view my website here: www.rachelclayton.co
CSS:
#media only screen and (max-width: 767px) {
#top-bar-logo {
text-align: center;
position: absolute;
}}
#media only screen and (max-width: 941px) {
#top-bar-logo {
display: block;
}
#top-bar-logo img {
max-width:60%;
height:auto;
}
#mobile-social {
display: none;
}
#top-bar {
height:40px;
position:relative;
line-height:40px;
background:#ffff;
z-index:99999;
}}
#media only screen and (max-width: 490px) {
#header {
padding-top: 10px;
padding-bottom: 10px;
}
#top-bar {
height:35px;
position:relative;
line-height:35px;
background:#ffff;
z-index:99999;
}
#top-bar-logo img {
max-width:70%;
height:auto;
}
#top-bar-logo {
display: inline-block;
}}
I'm having a hard time understanding this post.
Specifically what does this mean "When I shift it up to the top bar, it becomes un-clickable."? What is "it" as in "shift it up"?
I see in your site you wrapped the <img> with <a> - that is good.
<img src="https://rachelclayton.co/wp-content/uploads/2019/05/RClogo.png" alt="Rachel Clayton" />
Have you tried wrapping the <div id="top-bar-logo"> in the <a> tag as well?
Im having problems positioning a div to the right using media queries.
HTML
<div class="container">
<div class="left"></div>
</div>
CSS
body,html { height:100%; }
.container {
width:1000px;
height:100%;
background:#eee;
position:relative;
}
.left {
height:100%;
width:200px;
background:orange;
position:absolute;
left:0;
}
#media only screen and (max-width: 700px) {
.left {
position:absolute !important;
right:0 !important;
}
}
The left div is absolutely positioned to the left. I want to absolutely position that same div to the right when my media query is triggered at 700px width.
The problem is that it wont do it! I tried using !important. I tried to reiterate the position in the media query. NOTHING!
The weird part is that if I start off with the div absolutely positioned to the right , and with media queries, absolutely position the div to the left. IT WORKS!
What? Why?
DIV absolutely positioned to the left, with media query to bring the DIV to the right.
DOESNT WORK
http://jsfiddle.net/zfdmmyaz/
DIV absolutely positioned to the right, with media query to bring the DIV to the left.
THIS WORKS
http://jsfiddle.net/md07a02t/
How do I get this to work? How can I get my absolutely left positioned div to absolutely position itself all the way to the right when media query is triggered?
You need to reset the left value to auto, and then set the right value.
jsfiddle
#media only screen and (max-width: 700px) {
.left {
position: absolute;
left: auto;
right: 0;
background: lime;
}
}
Use float instead of left. Also, you don't need to make the .left div absolute since it will be absolutely positioned to it's relative container.
HTML
<div class="container">
<div class="left">Content</div>
<div class="clear"></div>
</div>
CSS
body,html { height:100%; }
.container {
width:1000px;
height:100%;
background-color:#eee;
position:relative;
border: 1px #000000 solid;
}
.left {
height:100%;
width:200px;
background-color:orange;
float: left;
}
.clear {
clear:both;
}
#media only screen and (max-width: 700px) {
.container {
width:100%;
}
.left {
float: right !important;
}
}
So, i have this dilemma with a three column div.
what i'm trying to achieve is the Center Div should be responsive and aligned center with a max width of 1000px. this can easily achieve using these css codes:
#center{max-width:1000px; width:100%; margin:0px auto; }
and then the left and right div should cover the remaining space. it's like the width of the Left and right = Total width MINUS the width of the center div.
http://jsfiddle.net/bendaggers/zb38d/4/
HTML:
<div class="wrapper">
<div class="left"></div>
<div class="center">Image Logo JPG here
</div>
<div class="right"></div>
</div>
CSS:
body {
width:100%;
}
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:50%;
background-color:blue;
}
.right {
display:table-cell;
width:50%;
background-color:black;
}
.center {
display:table-cell;
}
.center a{
display:inline-block;
width:100%; max-width:1000px;
}
the problem is its not working. here's the fiddle.
can some one help?
In case you would like to have the center responsive and you would like to have 3 equal width columns then you should set the width to 33.3%. One trick you could set the width of your central column as 34% and the left and right as 33% width.
If you want to avoid to take into account of border and padding applied to those 3 columns you could also apply box-sizing:border-box;
/* apply a natural box layout model to all elements */
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
This way border and padding will not expand the width of the column but instead will be applied inside each column width.
Also you can then center the a link inside the center column.
body {
width:100%;
}
.wrapper {
display:table;
width:100%;
}
.left {
display:table-cell;
width:33%;
background-color:blue;
}
.right {
display:table-cell;
width:33%;
background-color:black;
}
.center {
display:table-cell;
width:34%; max-width:1000px;
text-align:center;
}
DEMO: http://jsfiddle.net/zb38d/7/
Otherwise if you want the center to be fixed width then simply set a width in pixels or em:
.center{ width: 1000px; } but then you will need to set a different percentage of your left and right column then, different from 33%. Otherwise you will support only very high resolutions this way because you are setting a fixed width of 1000px for the center column.
The best bet is to re-think how you're designing this. The first answer with percentages is the best. White space is key to good design; filling up a page is not necessary.
Anyway, this uses jQuery to calculate the left and right, plus it uses the display-table, which doesn't allow for max-width, just width. Using just floats had a hard time with sub-pixels, so the display table worked better. It only makes sense to use this type of layout at 1450px and greater, then rely on different css for the other sizes below that. Because of the jQuery, it calculates the width and sticks the style into the parsed html, so !important is required for css below the 1450 min-width.
DEMO: http://jsbin.com/miqetu/1
Only tested on Firefox on a desktop. I have know idea if this works on touch devices or other browsers without issue.
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.col {
box-sizing: border-box;
float: none!important;
clear: both!important;
}
.inner {
padding: 20px
}
.column-1 {
background: #ccc
}
.column-2 {
background: #ddd
}
.column-3 {
background: #eee
}
#media (max-width:1449px) {
/* used to over-ride jQuery*/
.wrapper {
display: block!important
}
.col {
display: block!important
}
.column-1,
.column-2,
.column-3 {
clear: both;
float: none!important;
width: 100%!important;
}
}
#media (min-width:1450px) {
.inner {
padding: 30px
}
.wrapper {
display: table;
height: 100%;
}
.col {
display: table-cell;
height: 100%;
}
.column-2 {
width: 800px /*max-width won't work */
}
}
#media (min-width:1500px) {
.column-2 {
width: 1000px /*max-width won't work */
}
}
HTML
<div class="wrapper">
<div class="col column-1"><div class="inner">...</div></div>
<div class="col column-2"><div class="inner">....</div></div>
<div class="col column-3"><div class="inner">...</div></div>
</div>
JQuery:
$(window).on("load resize", function() {
if ($('body').width() >= 1450) {
var ww = $(window).width();
var rem = ww - $('.column-2').width();
$('.column-1, .column-3').css('width', rem / 2);
}
});
Does anybody have an idea why my media queries is not working. I want my image to stay to 1000px (which is the original image size) when it detect the screen 1000px or more.
Here's my code:
CSS:
.header
{
height:100px;
width:100%;
}
.header img
{
width:100%;
}
#media screen and (min-width:1000px;)
{
.header
{
height:100px;
width:1000px;
}
.header img
{
width:1000px;
}
}
HTML:
<div class="header">
<img src="/common/media/images/some-image.jpg" />
</div>
Just use css's max-width to set the max size of the image. Then it cannot be bigger than the original size.
So remove your media query, and simply use this:
.header {
height:100px;
width:100%;
}
.header img {
width:100%;
max-width: 1000px;
}
Replace 100% with
.header img
{
max-width:1000px;
}
I've got basic web design skills atm, I'm working on my portfolio and need help with the landing page please.
I want the heading and sub heading on my page to resize when the browser resizes, but it's not working.
The body font is 12px but I only want the font to resize in the div tags not the body text.
I have 2 div tags with ID tags for the CSS like so.
<div id="heading">
this is my heading text
</div>
<div id="subheading">
this is my subheading text
</div>
This is the css.
#heading {
float: left;
width: 100%;
padding-top: 3%;
padding-bottom: 1%;
font-size: 55px;
color: #FFF;
position: relative;
}
#subheading {
float: left;
width: 100%;
padding-top: 3%;
padding-bottom: 3%;
font-size: 36px;
position: relative;
}
I want both headings to reduce in size by about 20/30% when the window/browser is resized
but when I change the values for the tablet css, different to these values in the desktop view
everything changes straight away. I want the text to stay the same in desktop view and only change size in tablet view. Hope this makes sense.
Appreciate a reply.
Use Media Queries
For Instance,
#media only screen and (min-width: 1920px) {
#heading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
font-size: xxpt; /*put your size here*/
}
#subheading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:3%;
font-size:36px;
position:relative;
font-size: xxpt; /*put your size here*/
#media only screen and (min-width: 1024px) /* for ipad */ {
#heading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
font-size: xxpt; /*put your size here*/
}
#subheading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:3%;
font-size:36px;
position:relative;
font-size: xxpt; /*put your size here*/
}
PS: The pixel values are used as an approximation for illustrative purposes. You can replace them with your desired values.
See a working example of a media query here:
http://jsfiddle.net/fSYSJ/
body { background:silver; }
#heading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
}
#subheading {
float:left;
width:100%;
padding-top:3%;
padding-bottom:3%;
font-size:36px;
position:relative;
}
#media screen and (max-width: 768px)
{
#heading { color:red; }
#subheading { color:red; }
}
#media screen and (max-width: 420px)
{
#heading { color:blue; }
#subheading { color:blue; }
}
Notice I'm currently just changing the color of the headings, just adjust it to change the size instead and also adjust the break points in pixels to your liking.
Don't set the width to 100% ever ! Even better - remove the width and it will work ;d
#heading {
padding-top:3%;
padding-bottom:1%;
font-size:55px;
color:#FFF;
position:relative;
}
becouse the div is a BLOCK element, it will take all the space in X axis, so you dont have to set the width property. By default its 100% ;)