I'm trying to create a responsive web and I'm having trouble to do the media queries. I want a specific div to go on the bottom of some div. I'm new to CSS. Can someone help me about this?
I want the "Upcoming events" and the "Content" of it to go to the bottom of "Latest news" Div. The upcoming events and the content of it are different divs. Within (min-width: 1025px) and (max-width: 1260px).
Here's the original css code of the 2 divs that I want to put in the bottom.
// this is the title div. The "Upcoming Events"
.title2{
background:none repeat scroll 0 0 #FFFFFF;
padding-top: 19px;
padding-left: 15px;
padding-bottom: 5px;
margin-left: -7px;
width: 270px;
box-shadow: 0 0 3px #ccc;
display:block;
}
//here's the content
.sidebar{
background:none repeat scroll 0 0 #FFFFFF;
padding:19px;
width: 270px;
box-shadow: 0 0 3px #ccc;
display:block;
max-height: 374px;
-webkit-font-smoothing: antialiased;
}
//news div
.leftbar{
background:none repeat scroll 0 0 #FFFFFF;
padding:19px;
width: 250px;
box-shadow: 0 0 3px #ccc;
display:block;
max-height:741px;
overflow-y:scroll;
margin-left: 20px;
}
//latest news title div
.title{
background:none repeat scroll 0 0 #FFFFFF;
padding-top: 19px;
padding-left: 19px;
padding-right: 19px;
padding-bottom: 5px;
width: 250px;
box-shadow: 0 0 3px #ccc;
display:block;
margin-left: 20px;
}
my media queries
#media(min-width: 1025px) and (max-width: 1260px){
.img-responsive{
width: 260px;
height:70px;
}
.navbar-default .navbar-right > li > a {
padding: 0 10px;
margin-right:6px;
}
.leftbar{
}
.title{
}
.title2{
}
.sidebar{
}
}
Make the width of the latest news container as 100%
#media (min-width: 1025px) and (max-width: 1260px)
{
.title2, .sidebar{
width : 100% !important;
max-width : 100% !important;
}
}
Media queries are good but time-consuming and it can really mess you up. Instead of the media query go for bootstrap. It's clean and simple to use, all you gotta do is add the class name and bootstrap will do everything for you. For reference check this link
Related
I want a responsive page that changes when the browser size changes.
I haven't figured it out yet, but I want to use a Meta member!
HTML5 introduced a method to let web designers take control over the
viewport, through the tag. You should include the following
viewport element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This gives the browser instructions on how to control the page's
dimensions and scaling. The width=device-width part sets the width
of the page to follow the screen-width of the device (which will vary
depending on the device). The initial-scale=1.0 part sets the
initial zoom level when the page is first loaded by the browser.
w3schools
These queries use min-width, and something you can try is setting up a "diagnostic" div on your pages, and that way you know which media query is being used at any given time as you re-size your browser. When you're done you can just delete or comment it out.
#media only screen and (min-width:275px) {
#diagnostic {
background: #C00 url("https://praestocreative.com/images/css-275px.png") no-repeat 0% 0%;
width: 150px;
height: 26px;
border: 1px solid #FC0;
margin: 20px auto 0 auto;
float: none;}
}
#media only screen and (min-width:576px) {
#diagnostic {
background: #C00 url("https://praestocreative.com/images/css-576px.png") no-repeat 0% 0%;
width: 150px;
height: 26px;
border: 1px solid #FC0;
margin: 20px auto 0 auto;
float: none;}
}
#media only screen and (min-width:768px) {
#diagnostic {
background: #C00 url("https://praestocreative.com/images/css-768px.png") no-repeat 0% 0%;
width: 150px;
height: 26px;
border: 1px solid #FC0;
margin: 20px auto 0 auto;
float: none;}
}
#media only screen and (min-width:992px) {
#diagnostic {
background: #C00 url("https://praestocreative.com/images/css-992px.png") no-repeat 0% 0%;
width: 150px;
height: 26px;
border: 1px solid #FC0;
margin: 20px auto 0 auto;
float: none;}
}
#media only screen and (min-width:1200px) {
#diagnostic {
background: #C00 url("https://praestocreative.com/images/css-1200px.png") no-repeat 0% 0%;
width: 150px;
height: 26px;
border: 1px solid #FC0;
margin: 20px auto 0 auto;
float: none;}
}
<div id="diagnostic"></div>
https://jsfiddle.net/jasonbruce/6wzyfcod/4/
I'm having a problem on my new website. But first I should give you some information.
I'm building a full responsive website with a portfolio. My portfolio images stands in a DIV and response to the screen size. On a screen with more then 1005px it's working perfect. Also the scaling works great. This is because the following CSS line:
#media only screen and (max-width: 1005px) {
The div with my image is newtextportfolio. The image itself doesn't use CSS except 100% width and height. When i give my div the follow definition (height: auto;) i get a white line under my images. And i don't want the white line :(
.newtextportfolio {
width: calc(95% + 10px);
height: auto;
margin-right: 25px;
}
I can make it disappear if I make the height for example 200px. But when I view my site on an iPad this makes the images stretch (because it's fixed and not responsive).
Does anyone know how i can make the white line disappear? I already tried some things with calc, percentages but this also makes the line, only fixed pixels doesn't.
.newcontainersmallleftprices {
width: 310px;
float: left;
margin-left: 14px;
}
.newtop1 {
width: 310px;
background-image: url("../images/tops/portfolio1.png");
text-align: center;
font-size: 23px;
color: #FFFFFF;
height: 50px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
margin: auto;
padding-top: 20px;
float: left;
position: relative;
z-index: 2;
}
.newtextportfolio {
width: 310px;
height: 200px;
text-align: center;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
margin: auto;
background-color: #FFFFFF;
float: left;
position: relative;
z-index: 1;
font-size: 17px;
}
#media only screen and (max-width: 1005px) {
.newcontainerpricesmall {
width: 100%;
}
.newcontainersmallleftprices {
width: 95%;
margin-bottom: 25px;
margin-left: 4%;
}
.newtextportfolio {
width: calc(95% + 10px);
height: auto;
margin-right: 25px;
}
.newtop1 {
width: 95%;
padding-top: 20px;
padding-left: 5px;
padding-right: 5px;
margin-right: 25px;
}
}
<div class="newcontainer">
<div class="newcontainerpricesmall">
<div class="newcontainersmallleftprices">
<div class="newtop1">Broeckerhave</div>
<div class="newtextportfolio">
<a href="http://beta.gjwd.nl/images/portfolio/broeckerhave.png" data-lightbox="image-100" title="" class="portfolioimg"><img src="http://beta.gjwd.nl/images/portfolio/thumb/broeckerhave.png" width="100%" height="100%" /> </div>
</div>
Make the img element display:block.
https://jsfiddle.net/jmarikle/95gsk2tu/
An alternative approach is to give the image vertical-align: top;. This is being caused by the fact that images are inline elements with some block attributes. They retain line height, letter spacing, etc. Block level elements do not have those added calculations to their size, and aligning vertically collapses the attributes that cause the gap at the bottom.
I have a webpage with a menu bar, banner (div) and a main section (container div). The menu bar extends past the visible region of the window when the window is resized (made smaller), which triggers the horizontal scrollbar. But if I then scroll to the right in the resized window, the banner and container stay where they are and the background of the website is exposed.
Also I have a min-width enabled right now for the menu bar because I don't want the menu bar pieces collapsing down to the next available line in a messy fashion on resize.
Is there a way to get the bar to collapse in an organized manner on resize, for example: first row with 4 blocks, second row with 3 blocks. Or any other suggestions for how to deal with the menu bar during resize?
I've also had difficulty properly centering the menu bar.
Here is the jsfiddle for the page with the relevant sections of html and css. http://jsfiddle.net/dj99aq6e/
<div id="dtitle">
<h2 id="title">Title</h2>
</div>
piece of code for the menu bar:
<!--menu bar STARTS -->
<ul id="sddm">
<li><a href=""
onmouseover="mopen('m1')"
onmouseout="mclosetime()">test</a>
</li>
CSS:
body{
font-family: sans-serif;
background-color: #b2b2b2;
background-color: rgba(0, 0, 0, .2);
margin:0;
padding:0;
height:100%;
width:100%;
overflow-x: auto;
}
html{
margin:0;
padding:0;
height: 100%;
width: 100%;
overflow:hidden;
}
#dtitle{
background-color:black;
padding:0;
height:8%;
width:100%;
overflow:hidden;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
}
#sddm{
display:table;
margin:10px auto;
margin-bottom: 2px;
padding-left: 0;
min-width: 1050px;
z-index:30;
}
#sddm li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font:14px sans-serif
}
#sddm li a{
display: block;
margin: 0 1px 0 0;
padding: 8px 10px;
width: 128px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none
}
#sddm li a:hover{
background: #49A3FF}
#sddm div{
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2
}
#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 12px sans-serif
}
#sddm div a:hover
{ background: #49A3FF;
color: #FFF}
Is this what you are going for? http://jsfiddle.net/dj99aq6e/1/
I took out the overflow: hidden from #dtitle and adjust the text with padding
#dtitle{
background-color:black;
padding:0;
padding-top: 5px;
margin-top: -15px;
height:8%;
width:100%;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
}
OK, I figured it out.
I gave #about (the main content container) a min-width of 1000px, and #dtitle a min-width of 1050px. The 1050px min-width matches the min-width on the menu bar which was the key. Now upon resize and then horizontal scroll the previous gap on the right disappears!
I also put a div around the contact information div and gave it a min-width of 1050px so it stays positioned properly.
Here is the updated code: http://jsfiddle.net/dj99aq6e/2/
#dtitle{
background-color:black;
padding:0;
height:8%;
min-width:1050px;
overflow:hidden;
border:solid;
border-color: gray;
border-width:0 0 5px 0;
min-height: 60px;
We are pulling code from one of our websites (which has full width content) and attempting to use a similar media query on a different site whose content includes empty sidebars. The main issue is that in mobile views, our page maintains those sidebars and crunches everything into a skinny column. The page has a form on the right with an image to the left, logo above, company logos below, and text below company logos.
Any suggestions on which piece of this I should be messing with to fill the full width in mobile? Also, we are operating these properties within HubSpot's COS.
Here is what we are pulling:
<style>
#media (max-width: 768px) {
.testimonials {margin-top:500px;}
.row-fluid-wrapper.row-depth-3.row-number-3 {background: #FFFFFF;}
}
.inner-form{
margin-left: 68% !important;
max-width: 300px;
margin-top: 20px;
position: relative;
z-index: 2;
}
.outer-form{
height: 345px;
}
.needs-background{
background: url(http://cdn2.hubspot.net/hub/362750/file-830706138-png/quote_us_medicare/pic.png) no-repeat; padding-bottom:100px;
}
#media(max-width:767px){
.needs-background{
background:initial !important;
}
.inner-form{
margin: 0 auto !important;
height: initial;
margin-top: initial;
}
}
#hs_cos_wrapper_module_1396381482147112 input[type="submit"] {
font-size: 16px !important;
display: inline-block !important;
color: #ffffff !important;
text-align: center !important;
margin-right: 2px !important;
margin-bottom: 15px !important;
margin-top: 15px !important;
padding-right: 35px !important;
margin-left: 2px !important;
padding-bottom: 12px !important;
padding-top: 12px !important;
font-weight: bold !important;
line-height: 30px !important;
border:2px solid;
border-radius:10px;
border-color: #D1D1D1;
}
#media(min-width:768px){
.small-screen-image{
display:none !important;
}
}
</style>
It's hard to tell without seeing the HTML code. But from what you describe, you could use the mobile media queries to grab the sidebars and set the width to zero and display: none. Then you could set the width of the main form in the same query to fill the width of the screen.
I'm trying to make an elastic layout which aligns both the left and the right margins with the far left and far right of the page, no matter how many items are shown on that line.
This is my code: http://jsfiddle.net/U2W72/1/
.thumb {
float: left;
width:16%;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4%;
background: pink;
height: 200px;
}
.thumb:nth-child(5n) {
margin-right: 0px;
box-shadow:inset 0 0 0 3px red;
}
.thumb:nth-child(5n+1) {
margin-left: 0px;
box-shadow:inset 0 0 0 3px blue;
}
#media (max-width: 1200px) {
.thumb, .thumb:nth-child(1n) {
width:21%;
margin-left: 2%;
margin-right: 2%;
margin-bottom: 4%;
box-shadow: 0 0;
}
.thumb:nth-child(4n) {
margin-right:0;
box-shadow:inset 0 0 0 3px yellow;
}
.thumb:nth-child(4n+1) {
margin-left:0;
box-shadow:inset 0 0 0 3px blue;
}
}
#media (max-width: 600px) {
.thumb, .thumb:nth-child(1n) {
width:46%;
}
.thumb:nth-child(2n) {
margin-right:0;
box-shadow:inset 0 0 0 3px gray;
}
.thumb:nth-child(2n+1) {
margin-left:0;
box-shadow:inset 0 0 0 3px blue;
}
}
#media (max-width: 400px) {
.thumb, .thumb:nth-child(1n) {
width:100%;
display:block;
margin:0;
box-shadow: inset 0 0 5px 1px;
}
}
#left {
float: left
}
#right {
float: right
}
I believe I am using nth child correctly to remove the margin from the left and right most pink boxes so they align but it doesn't look correct when I run it. Can anyone show me where I am going wrong please?
When you remove the margins from first and last element on the row, total of widths+margins isn't 100%. Example:
if you have 5 boxes with width 16% and margin left and right 2%, then total is 100%. But when you remove 2% margin from first box and 2% margin from last box, then total is 96%. Make sense?