I’ve got a <div> section in content body with a <table> inside, like below:
<div class="hub_specification">
example html table
</div>
For Desktop view, I’d like to show this <div> with 50% width of content area, floated left.
For Mobile view, I’d like to show this <div> with 100% width of content area, without any float.
So what will be the CSS code to decorate the hub_specification <div>?
It would be better if both ways were present: CSS for a file called style.css in WordPress and inline.
If I am not wrong do you want this? click
HTML
<div class="hub_specification">
example html table
</div>
CSS
.hub_specification {
width:100%;
background-color:red;
height:20px;
}
#media only screen and (max-width:350px) {
.hub_specification {
width:50%;
background-color:oink;
height:20px;
}
}
Use CSS media queries
.hub_specification{
background-color: lightgreen;
}
#media screen and (max-width: 480px) {
.hub_specification {
background-color: lightblue;
}
}
Reference: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Related
I'm working on AB Testing variation for a website that use tons of CSS rules and I'm wondering if there is a possibility to apply their classical 767px view media queries for a unique div (something like an iframe behavior)
Indeed, we try to add a second div to give more information and we reduced the size of the original div that used to live with width:100%
I would like to do something like this :
<main>
<section>
<div class="Original_Div"> //Apply CSS like browser is 767px
</div>
<div class="New_Div"> //Apply normal CSS
</div>
</section>
</main>
Perhaps this will help better understanding
Actual Version
Variation variation
Massive thanks !!
You can add any extra styling you like by adding more style blocks to your html. The example below has a media query that will give you the red div only at screen widths of up to 768px. For sizes bigger than that (e.g. a laptop or desktop) then the green div appears. To ensure the div gets no larger than 768px (e.g. a typical tablet size) then use the max-width css rule. If you want to control the height also to make it look like it's a tablet screen then you can use the aspect-ratio css rule (see here for info)
If you're modifying someone else's html then make sure you use a unique class name or id so you control your specific elements. The inspector on the browser's web developer tools (on firefox it's Ctrl + Shift + I) is useful to find out what's actually being rendered.
body {
background-color: #282C34;
}
section {
display:flex;
gap: 1rem;
padding: 1rem;
height:80vh;
}
section > div {
padding: 1rem 2rem;
}
.Original_Div {
flex-grow:1;
max-width:767px;
border: 0.25rem solid red;
color:red;
}
.New_Div {
flex-grow:1;
border: 0.25rem solid #00ff00;
color: #00ff00;
}
#media only screen and (max-width:767px) {
.New_Div {
display:none;
}
}
<main>
<section>
<div class="Original_Div">
Original with media queries that fit this width
</div>
<div class="New_Div">
New block
</div>
</section>
</main>
I think I understand what you have asked. You want to behave a div in tablet media query while at the same time the other div should behave on media queries of normal Document size.
You can apply tablet media queries to a specific div and add !important so it will override other media queries that may have applied to its parent div/body element.
You can do the same for other div where you want to apply regular media queries.
#media screen and (min-width: 600px) {
.Original_Div {
max-width: 80% !important;
display: inline !important;
}
.New_Div{
max-width: 20% !important;
display: inline !important;
}
}
If I misunderstood your requirements, do let me know so I can provide you with right solution.
I have three divs: a, b, and c. They are each 48% wide and displayed as inline blocks. This style will be applied to several pages. Div a will always be shorter than div b. This creates a gap between the bottom of a and the top of c. (Divs a and b will be slightly different heights on each page, but a will always be shorter. Because of the inconsistent heights, I don't feel I can reliably use margin-top:-10px for example.)
How it is:
How I want it:
edit
Mobile:
/edit
CSS
div {
width:48%;
box-sizing:border-box;
display:inline-block;
border:1px solid;
vertical-align:top;
}
#media only screen and (max-width: 600px) {
div {
width:100%;
}
}
HTML
<div style="border-color:red;">a<br>a</div>
<div style="border-color:green;">b<br>b<br>b<br>b<br>b<br>b<br>b<br>b</div>
<div style="border-color:blue;">c<br>c<br>c<br></div>
The media query allows the three divs will be stacked in one column on smaller screen sizes. That's why the divs need to be in this order.
A bit tricky due the dual layout. Keeping the same html layout you have it can be done with a selector for the elements and another for the "b" item (a class, or :nth-child(2) or ...) dealing with float and margin.
(change media with in the code snippet to check the layout change)
div{display:inline-block;width:48%;border:1px solid red;float:left;clear:left}
div.b{clear:none;float:right;margin-right:2%}
#media only screen and (max-width: 200px) {
div {
width:100%;float:none;clear:both;
}
div.b{margin-right:0;float:none;clear:both;}
}
<div class="a">a<br/>a<br/>a<br/>a</div>
<div class="b">b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/>b<br/></div>
<div class="c">c<br/>c<br/>c<br/>c</div>
set the min-height to them all to be equal in length.
div {
width:48%;
min-height:300px;
box-sizing:border-box;
display:inline-block;
border:1px solid;
vertical-align:top;
}
I would like to have a div, that is centered in its parent, but children inside of it would be left aligned. Wanting this, I obtained the following:
.centered {
text-align: center;
}
.container {
background: red;
padding: 10px;
display: inline-block;
}
.child {
width: 100px;
height: 100px;
float: left;
}
.child:nth-child(even) {
background: green;
}
.child:nth-child(odd) {
background: blue;
}
<div class="centered">
<div class="container">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</div>
http://jsfiddle.net/SbPRg/ (source: Having the floating children elements determine parent width).
The problem is that when you resize the page, there still is a problem whereas the main "red" div is wider than what I want, and shows a big part of red instead of resizing to a smaller container that 'fits' its children.
Would you have any idea of how to obtain something like this, without javascript ?
The main idea is to display a "gallery" of images, in a responsive way (if the screen is too small, display one image per row, up until three per row if the screen is wide).
Just add CSS Media Query rules. Add the following rule to your CSS.
CSS
#media screen and (max-width: 337px) {
.child
{
float:none;
text-align:center;
display:block;
}
}
Working : Demo
Note: CSS Media Query is use to effect the styling to your HTML based on screen width's and height's
Here in your example i have added media query rule which gives style to .child class when the screen width reaches the 337px .
There could be max-width or min-width for width's similar for heights.
What is max-width: Here i have given it 337px, so it says that the css inside the rule should apply only when screen width is <=337px. If screen width is >337px then it would not apply the css within that rule.
Just set the Container width to the exact width you want (in the JSFidlle: you need to add width:300px;)
and when you resize the window nothing happen.
to make it responsive use:
#media screen and (max-width:480px)
and set the width of the container for every screen size(or for the three block and for two then for just one)
You could try a media query like this:
#media screen and (max-width: 350px) {
.container {width: 100px;}
}
Check the demo
The reason that the parent container "shows a big part of red instead of resizing to a smaller container that 'fits' its children" is that you've explicitly given it ten pixels of padding on all sides. Remove that padding from .container, and the div will shrink to the width of its children.
I guess you want something like this.
Use media query to apply relevant css to the elements based on the various screen sizes.
Here is the css you need to add:
#media only screen and (max-width: 350px) {
.child {
clear:both;
}
}
One alternative would be to use a framework like Bootstrap, which is good enough for making responsive webpages.
Here are the links you can refer to:
Media query reference.
Bootstrap.
I need to get 3 row layout in HTML + CSS in my Angular.js app.
It should work like this:
My problem is when I resize my middle div get onto my top bar.
Here's some of my code:
.top-pos {
&.small {
padding-bottom: 130px;
}
&.big {
padding-bottom: 170px;
}
}
.bottom-pos {
bottom: 10px;
right: 0;
width: 100%;
position: absolute;
}
.middle {
#include align(vertical);
width: 100%;
}
HTML
<div class="top-pos small">
<div class="position-container">
<div class="top">
<h1 class="title">Some title</h1>
</div>
<div class="middle">
<input type="text" />
<input type="text" />
</div>
</div>
</div>
<div class="bottom-pos">
<button class="submit">Search</button>
</div>
Generally the top bar div should be always on top of the page, the bottom bar should be ALWAYS on bottom and the middle should be always on the middle between top and bottom bar. And the scrollbar should appear when all the elements are like on the second picture.
If older browser support is not an issue you could use css3 flex box to achieve something like this (not exact replica of the images):
#container{
display:flex;
flex-flow:column;
justify-content:space-around;
align-items:center;
width:50%;
height:100%;
}
#container div {
width:90%;
color:#fff;
background:black;
}
#top,#bottom{
height:50px;
}
#middle{
height:100px;
}
Demo
I have created a Fiddle which uses media queries to solve your problem. Hope that helps
CSS:
#media (min-width:400px) {
.top,.middle{
margin-bottom:20px
}
}
#media (max-width:399px) {
.top,.middle{
margin-bottom:2px;
}
h1{
margin:0;
}
}
For creating grid-like layouts that respond to window size changes, you should really consider Bootstrap. It allows you to very easily define layouts that are responsive to the window size. It also really nicely works together with Angular, since Angular defined directives that replace the Javascript part of Bootstrap. However, if you are only interested in the Grid layout part of Bootstrap, you do not need any Javascript at all, since it is all defined in CSS. See this link for more info on the Grid layout of Bootstrap:
http://getbootstrap.com/examples/grid/
I want to change the width of the area that i present things (the body), i add picture for better understanding of what i'm looking for:
(the yellow mark is the width that i'm looking for to my HTML body, How can i do it ?
I'm using MVC 4 w/ bootstrap.
Additional info: I have a navbar that require from me to add style configures in the '_layout' in order to display the page in a proper way and not to allow the navbar to be over the body content, here is it:
<style>
body {
padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
}
.aligntobottom {
bottom: 0;
position: absolute;
}
</style>
What i need to add to the style markup in order to get what i want?
Update This is how i render the body (in the '_layout'):
<div class="container">
#if (IsSectionDefined("featured"))
{
<div class="hero-unit">
#RenderSection("featured", required: false)
</div>
}
#RenderBody()
</div> <!-- /container -->
So its inside a container at the first place.(i render the body into the container)
update
**I notice that the problem is because the '#media' :
But now i see that i have a couple of #media section in my CSS:
#media (min-width: 768px) {
.container {
width: 550px;
/*width: 750px;*/
/*MAYBE THIS*/
}
#media (min-width: 992px) {
.container {
width: 550px;
/*width: 970px;*/
/*MAYBE THIS*/
}
#media (min-width: 1200px) {
.container {
/*width: 1170px;*/
width: 550px;
/*MAYBE THIS*/
}
what i need to change in order to keep the suitability for all type of browser and screens ??
I change all of them(1200px, 992px, 768px) like the code i post, how can i know which one i'm currently using ? hence what my media width?
If I read your post correctly, I think you're trying to make the content narrower keeping the nav bar to the full width.... then I suggest changing the following
<div id="navbar">
code of the navigation bar
</div>
<div id="content" >
content
</div>
and then change the stile to look like this
#navbar{
width:100%;
/*other styles*/
}
#content{
width:920px;/*change the value to suite ur need*/
margin:0 auto;/*this will center ur content*/
}
If you want to make the nav bar the same width as the content then add the #navbar div inside the content div as follows:
<div id="content">
<div id="navbar">
code of the navigation bar
</div>
content
</div>
create a new div, just after the body tag, put everything inside it, give width (eg 1200px) and margin:0 auto; to keep it at the center of the screen.
if you are using bootstrap, put everything inside of "container".
There's no need to modify the CSS, jsut put the content of your page inside a
<div class="container">
<!-- More HTML here -->
</div>
If you want to make is narrower you could use:
<div class="container">
<div class="row">
<div class="col-lg-offset-1 col-lg-10">
</div>
</div>
</div>