.row {
margin-bottom: 0px;
}
is not being applied but when I remove the second media query it is?
Design was desktop by default and now trying to implement mobile and tablet.
body {
background-image: url('../images/iStock-527528428 Cropped.jpg');
background-repeat: no-repeat;
background-position: center top;
/*background-attachment: fixed;*/
color: white;
}
.container {
width: 37%;
background-color: black;
background: rgba(0, 0, 0, 0.67);
border-radius: 17px;
padding: 17px;
position: relative;
top: 37px;
}
#media screen and (max-width: 600px) {
.container {
width: 85%;
top: 24px;
}
body {
background-position: left top;
}
}
#media screen and (min-width: 601px) and (max-width: 992px) {
.container {
width: 55%;
top: 24px;
}
}
.row {
margin-bottom: 0px;
}
html {
font-family: 'Nunito', sans-serif;
}
By default bootstrap has no margin at bottom of .row class.
Related
I want to resize column width using media queries but i can't able to so i need expert advice and i can show you whole code if you want.The problem is occuring in my .cities class and .cities .col, i can't change width,font-size,icon size.
Nothing at all.
Thank You
CSS code:
#media only screen and (max-width:767) and (orientation:landscape) {
/* Styles for Landscape screen */
header {
height: 200vh;
}
header nav li a {
font-size: 85%;
}
.cities .col {
display: block;
width: 100%;
}
.cities h3 {
font-size: 10%;
}
.ios-small {
font-size: 100%;
}
.cities .col img {
width: 100%
}
.cities {
padding: 0px;
}
.cities .col {
margin-top: 5%;
padding-bottom: 2%;
width: 100%;
transition: width 0.3s;
}
.cities .col:hover {
background: rgba(234, 234, 234, 0.9);
color: black;
}
.cities .col img {
width: 100%;
height: auto;
margin: 0 0 0 0px;
}
.cities h3 {
text-align: left;
margin: -4px 0 0 0px;
font-size: 100%;
}
.ios-small {
font-size: 20%;
font-weight: 200;
margin-right: 5px;
font-style: italic;
color: #e67e22;
}
}
This is the Preview of Website in Iphone6 Landscape
You need to add a unit for your breakpoint so max-width:767px.
Now, when i make the window of my codepen narrower, the block with quote responsively goes down, covering both buttons.
I would like it to go up so it doesn't approach the buttons.
Here's the codepen: http://codepen.io/RycerzPegaza/pen/NGpEGp?editors=010
Here's the CSS:
#import url(https://fonts.googleapis.com/css?family=Lato:700|Amatic+SC:700&subset=latin,latin-ext);
body{
background: url('http://i147.photobucket.com/albums/r293/VIEWLINER/REED/RFGF02.jpg~original') no-repeat center center fixed;
background-size: cover;
}
.row-fluid {
position: relative;
top: 200px;
}
p {
font-family: 'Amatic SC';
color: #DDDDDD;
font-size: 250%;
padding: 10px;
}
#qouteblock {
position: relative;
margin-bottom: ;
}
#background{
position: relative;
top: 170px;
background-color:rgba(0,0,0,0.6);
}
.container {
padding: 10px;
}
nav {
position: fixed;
bottom: 5%;
left: 46%;
font-family: 'Lato';
font-size: 18px !important;
}
iframe {
position: fixed;
bottom: 2%;
left: 46%;
}
Use media queries for reduce font-size propierty of .content:
#media (max-width: 650px) {
p {
font-size: 30px
}
}
My site, like many others, utilizes bootstrap's carousel on the home page.
For some reason, despite the carousel-control appearing and everything else looking fine, the data slide functionality stops working on monitor sizes less than 480px (so, any mobile device).
Is there a snippet of code I need to add to the #media(max-width:480px) section in the CSS? As it stands I don't have any carousel/responsive related code under that size, but just the following:
#media (max-width: 979px) {
.carousel .item {
height: 500px;
}
.carousel img {
width: auto;
height: 500px;
}
}
#media (max-width: 767px) {
.carousel {
margin-left: -20px;
margin-right: -20px;
}
.carousel .container {}
.carousel .item {
height: 300px;
}
.carousel img {
height: 300px;
}
.carousel-caption {
width: 65%;
padding: 0 70px;
margin-top: 100px;
}
.carousel-caption h1 {
font-size: 30px;
}
.carousel-caption .lead, .carousel-caption .btn {
font-size: 18px;
}
}
An example can be seen here.
Add a z-index on you carousel-control:
.carousel-control {
height: 80px;
margin-top: 0;
font-size: 120px;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
background-color: transparent;
border: 0;
position: absolute;
top: 40%;
left: 15px;
color: #fff;
z-index: 99999; /*Add This */
}
What this is doing it just making this control be in front of the slider that is more than the actual screen size.
I've got a container div (the background in the picture below) and an inner div that contains images (social icons).
I want my images to overflow out of the bounds of the container div (as you can see in the image), but at the same time I want the container to resize: its height should decrease when my images overlap its top border. So there shouldn't be that lower empty border: the container behaves like if the images were fixed, while they are not.
Here's the image:
How can I do that?
EDIT: This is what I'd like to obtain (well, something like this I mean :P )
The height of the container div (the dark background you see) is dynamically set by its content.
try giving the position of inner div to position:absolute in relative with the parent div
then you can play around with the inner divs by adjusting the top,left,bottom and right properties
// css
body{ background: url("http://1.bp.blogspot.com/-OowkzBiSOJU/Ud0G3T325lI/AAAAAAAACfY/syhVEMuuSOw/s1600/tiny_grid.png") repeat scroll 0 0 transparent; color: #666; height: 100%; padding: 0; font-family: 'Lora',Georgia,Serif; font-size: 18px; line-height: 29px; border-top: 5px solid #4690B3; }
.clr { clear:both; float:none; }
.ct-wrapper { padding:0px 20px; position:relative; max-width:1230px; margin: 0 auto; }
.header-wrapper {
background: #fff; border-bottom: 1px solid #ccc; display: inline-block; float: left; width: 100%; }
/***** Optin Form CSS *****/
.opt-in .inner { background: url("http://3.bp.blogspot.com/-YfUnP1wOFzQ/Ud0G21XXRWI/AAAAAAAACfQ/Hg5Gakd69tQ/s1600/home-bg.png") repeat scroll 0 0 transparent; padding: 10px 0 0; font-style: italic; color: #ccc; text-shadow: 0 1px 1px #000000; margin-top:50px;height:50px; }
.opt-in .opt-in-wrap { margin-right: 40%; }
.opt-in .info { float: left; width: 80%; }
/*****************************************
Responsive styles
******************************************/
#media screen and (max-width: 1024px) {
#header, .header-right { float: none; text-align: center; width: 100%; }
.header-right .widget-content { margin: 0; }
}
#media screen and (max-width: 960px) {
.ct-wrapper{ padding:0 15px; }
.main-wrapper, .opt-in .opt-in-wrap{ margin-right:0; width:100%; }
.sidebar-wrapper{ float: left; width: auto; margin-left: 20px; }
.nav-menu ul { text-align: center; }
.nav-menu ul li { float: none; }
.opt-in .inner .ct-wrapper { padding: 0 48px; }
.opt-in .info { text-align: center; }
.opt-in .signup-form { margin-top: 30px; width: 95%; float: left; }
#subbox { width: 60%; }
}
#media screen and (max-width: 768px){
#header p.description { margin: 0; }
.header-right { display: none; }
#comment-editor { margin:10px; }
.footer { width: 50%; }
}
#media screen and (max-width: 500px){
#header img { width:100%; }
.opt-in .inner .ct-wrapper { padding: 0 10px; }
}
#media screen and (max-width: 420px){
.comments .comments-content .datetime{ display:block; float:none; }
.comments .comments-content .comment-header { height:70px; }
}
#media screen and (max-width: 320px){
.footer { width: 100%; }
.ct-wrapper{ padding:0; }
.post-body img{ max-width: 220px; }
.comments .comments-content .comment-replies { margin-left: 0; }
}
/*****************************************
Hiding Header Date and Feed Links
******************************************/
h2.date-header{display:none;}
.opt-in .social-div {
background: rgba(0, 0, 0, 0.0);
border: none;
float: right;
font-size: 16px;
text-align: center;
position: absolute;
top: -55px;
}
.opt-in .social-div .form-inner { font-size: 16px; margin: 35px; }
Once I accidentally left out some proper syntax for my media queries at the stated mobile viewport. It displayed correctly, which is awesome, but I'd like to be using the correct syntax, and am curious to know why / how this is occurring. Below are the styles involved.
/* Smartphones (Landscape) ----------- */
#media only screen and (min-width: 320px) and (max-width: 480px)
ul.ui-tabs-nav li.ui-state-active a {
background-color: #C6C699;
height: 17px;
text-shadow: none;
width: 77px;
}
.content .full header, .content .full .entry-summary, .content .full .entry-content, .content .full .entry-meta, .content .full .edit-link {
margin-top: 3px;
padding: 15px;
width: 100%;
}
#topbgimg { display: none; }
#topvidarea {
margin-left: 21%;
margin-right: 20%;
margin-top: -5px;
max-width: 400px;
}
#topmenucontain { display: none; }
.fmenu { display: none; }
#clogo { display: none; }
#youtube1, #youtube2 { display: none; }
#wrapper {
margin: 0 1em;
}
h1 {
font-size: 2em;
}
#logoimg { display: none; }
#notification {
height: 200px;
margin: 0;
width: 100%;
padding-top:20px;
}
.ui-tabs .ui-tabs-nav li a {
border: 3px solid white;
color: white;
}
#branding {
width: 100%;
padding: 1em 0;
margin: 0;
text-align: center;
}
#topbtn, #topbtn2, #topbtn3 {
width: 75px;
}
#topbtnbuy {
background: none repeat scroll 0 0 #C6C699;
border: 1px solid #C6C699;
color: #333333;
display: inline;
float: left;
font-family: Georgia;
font-size: 12px;
height: 42px;
margin-right: 10px;
margin-top: -1px;
width: 25%;
}
a.box:link {
min-width: 70%;
}
nav#access {
border-bottom: 1px dashed #CFCFCF;
position: relative;
text-align: center;
}
nav#access ul.menu li:nth-child(n+5) {
display: none;
}
.content {
min-height: 0;
background-image: none !important;
border-bottom: 1px dashed #CFCFCF;
}
/* Hide Background & Overlay Images */
.overlay {
display: none;
}
.has-background {
min-height: 0;
}
.content header, .content .entry-summary,
.content .entry-content, .content .edit-link,
footer.entry-meta {
width: 100%;
}
.content header, .has-background header {
margin-top: 2em;
}
.content header h2 a, .single .content header h2 {
font-size: 2em;
}
.content section.right,
.content section.left,
.content section.full,
.content section.center {
padding: 0;
}
.content section.center header,
.content section.center .entry-summary,
.content section.center .entry-content,
.content section.center .edit-link,
.content section.center footer.entry-meta,
.content section.right header,
.content section.right .entry-summary,
.content section.right .entry-content,
.content section.right .edit-link,
.content section.right footer.entry-meta {
left: 0;
}
#comments {
margin: 1em 0;
}
#comment, #commentform input,
#commentform #submit, #commentform #comment {
width: 416px;
}
.commentlist {
width: 424px;
}
#commentform #submit {
width: 430px;
}
#comments, #commentform #comment-reply {
width: 100%;
}
.cat-links, .entry-meta .sep:nth-child(n+4),
.comments-link, .edit-link {
display: none;
}
/* Footer */
#footer {
width: 100%;
padding: 1em 0;
}
#footer-widgets {
margin-bottom: 1em;
}
#footer .widget {
width: 45%;
margin: 0.5em 0;
}
.third-box {
width: 89%;
}
#buybutton { width: 95%; }
.scrolldowntext { margin-top: 40px; }
#notification {
background-color: #333333;
border-bottom: 5px solid #C6C699;
font-size: 22px;
height: 200px;
padding-top: 20px;
position: absolute;
width: 100%;
z-index: 9990;
}
#topcaption {
display: none;
}
#logoimg { display: none;}
#topmenucontain {
margin: -33px auto 0;
width: 50%; }
a.box:link {
color: #C6C699;
display: inline;
float: left;
font-family: Georgia;
font-size: 12px;
height: 50px;
margin-right: 10px;
min-width: 75px;
}
#videoscreenshot { height: 215px; width: 100%; }
.fancybox-iframe { display: hidden; }
}
Once I left out the additional { at the end of '#media only screen and (min-width: 320px) and (max-width: 480px)' all my media queries were being read?
Update: Just tried removing all styles within specified above viewport, in attempts to start from scratch properly in case some styles were whatever.
BUT, within starting, I simply am trying to hide the top menu within the viewport. And this is ignored and not rendering for some reason?
/* Smartphones (Landscape) ----------- */
#media only screen and (min-width: 320px) and (max-width: 480px) {
#topvidarea {
margin-left: 24%;
margin-right: 20%;
margin-top: -265px;
max-width: 400px;
}
#topmenucontain { display: none; }
}
You have no opening bracket in your media query but you do have a closing one:
#media only screen and (min-width: 320px) and (max-width: 480px) {
......
}
All your other media queries where probably being read because you were not properly closing your first query, and thus the query did not know where to begin and end.