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.
Related
According to the validator the errors are at line 136 and line 196.
I have tried to remove and change the font-size, because vW isn't a valid font-size, but that didn't change anything.
I hope you can figure out what's wrong with my code.
#media only screen and (min-width: 376px) {
.navbar {
float: right;
overflow: hidden;
background-color: #BA6815;
position: static;
top: 0;
width: 51%;
height: 50%;
}
.tabletfoto img {
display: inline;
float: right;
width: 51%;
}
.titel {
text-align: center;
font-size: 4.5vw;
color: #001111;
}
.titelnavbar {
text-align: center;
color: #001111;
font-size: 5.5vw;
}
.normaletekst {
text-align: left;
color: #000000;
font-size: 3vw;
}
}
#media only screen and (min-width: 1025px) {
.tabletfoto img {
display: none;
}
.navbar {
overflow: hidden;
background-color: #BA6815;
position: fixed;
top: 0;
max-width: 14%;
height: 100%;
}
.navbar a {
float: left;
display: block;
color: #FFFFFF;
text-align: center;
padding: 15% 13%;
text-decoration: none;
font-size: 1.5vw;
}
.navbar a:hover {
color: #AA0000;
font-size: 2vw;
}
.titel {
text-align: center;
color: #2E2A27;
font-size: 2.5vw;
width: 100%;
}
.titelnavbar {
text-align: center;
color: #2E2A27;
font-size: 2.5vw;
}
.normaletekst {
text-align: left;
color: #000000;
margin-left: 15%;
font-size: 2vw;
}
}
Underneath here the error I keep getting:
vw is valid as a font-size but the validator isn't up to date.
Note the CSS version it's using is 2.1 which is very old.
If it works, ignore it - unless you are trying to support browsers which do not support anything after 2.1. In that case, use a fallback font-size.
So here is the css code and when i go to developer tools (Mozila) the code isn`t executed in responisve mode as it should.
The margin-left:auto; is underlined as u can see in the picture that i uploaded.
I am new to responsive design.If you wanna see the whole project(page) click here, please help.
Developer tools image
#media screen and (max-width: 750px) {
img {
margin-left: auto;
}
}
body {
margin: 0;
overflow: auto;
background-color: #a6a6a6;
}
img {
margin-left: 40%;
}
p {
text-align: center;
font-size: 1.2em;
}
ul {
font-size: 1.3em;
margin-left: 15%;
margin-right: 15%;
}
small {
text-align: center;
margin-left: 45%;
}
hr {
display: block;
height: 1em;
border: 0;
border-top: 0.1em solid #4d4d4d;
margin-right: 10%;
margin-left: 10%;
padding: 0;
}
#title {
float: left;
text-align: center;
background-color: #cccccc;
width: 100%;
top: 0;
position: fixed;
margin-left: 0;
font-size: 1.25em;
}
#content {
background-color: #e6e6e6;
margin-left: 5%;
margin-top: 10%;
margin-right: 5%;
margin-bottom: 6%;
}
#e {
font-size: 2em;
}
#timeline {
font-size: 1.5em;
}
#sources {
font-size: 1.8em;
}
#Author {
font-size: 1.6em;
}
a {
cursor: pointer;
text-decoration: none;
}
a:visited {
cursor: pointer;
text-decoration: none;
color: blue;
}
a:hover {
cursor: pointer;
text-decoration: none;
}
Order of declarations in CSS matters. Move the media query BELOW the img { margin-left:40%; } and it should work.
The media queries you see in style sheets tend to be better placed at the bottom. Place
#media screen and (max-width:750px){
img{
margin-left:auto;
}
}
underneath the last CSS declaration
I'm trying to figure out what's wrong with my responsive website.
On a desktop it looks fine, but when you view the mobile version, the class ".game-box" looks fine on the main page, but on other pages the text inside that class looks tiny.
I coded the styles in SCSS. Here is the full code:
/* MIXIINS */
#mixin hFonts($font-size, $device-font-size) {
font-size: $font-size;
font-family: $font-serif;
color: $font-color-med;
#media screen and (max-device-width: $media-mobile-med) {
font-size: $device-font-size;
}
}
/* FONTS */
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro");
#import url("https://fonts.googleapis.com/css?family=Alegreya:700");
$font-serif: 'Alegreya', serif;
$font-sans: 'Source Sans Pro', sans-serif;
$font-color-dark: #222;
$font-color-med: #444;
$font-color-light: white;
$font-size-small: 12px;
$font-size-med: 16px;
$font-size-large: 24px;
$font-size-xl: 32px;
$font-size-xxl: 48px;
$font-size-nav: 19px;
/* COLORS & BACKGROUNDS */
#import 'gradient';
$websiteBackground: #343434 url("/img/footer_lodyas.png");
$navBackground: #505050 url("/img/tweed.png");
$contentBackgroundColor: ghostwhite;
$sidebarColor: ghostwhite - #111;
/* VARIABLES */
$headerHeight: 150px;
$navHeight: $headerHeight - 90px;
$imgPosition: $headerHeight - 184px;
$titlePosition: ($headerHeight - $navHeight) / 2 - 18px;
$foot-height: 90px;
$sidebarWidth: 300px;
$gutter: 10px;
$media-narrow: 845px;
$media-mobile-small: 640px;
$media-mobile-med: 720px;
$media-mobile-large: 1080px;
/* RESET */
%reset { margin: 0; padding: 0; }
html, body {#extend %reset; background: $websiteBackground; height: 100%;}
div {#extend %reset;}
h1 { #include hFonts($font-size-large, $font-size-xxl); }
h2 { #include hFonts($font-size-med, $font-size-xl); }
p, li, a, q, blockquote { font-family: $font-sans; color: $font-color-med;}
/* CLASSES */
.container { padding: 0 $gutter; }
.light-text { color: $font-color-light; }
.link-inactive { text-decoration: line-through; }
.game-box {
font-family: $font-sans;
float: left;
width: calc(33% - 2 * #{$gutter});
min-height: 300px;
margin: $gutter; padding: 0;
border: 1px solid blue;
border-radius: $gutter / 2;
overflow: hidden;
box-shadow: 1px 1px $gutter / 2 0 black;
background-color: white;
.box-title {
padding: $gutter;
color: $font-color-light;
#extend .blueGradient;
}
.box-description {
padding: 0 $gutter;
}
#media screen and (max-device-width: $media-mobile-med) {
margin: 2 * $gutter;
width: calc(100% - 4 * #{$gutter});
font-size: $font-size-large;
}
}
.top-image {
background: {
position: center center;
size: cover;
repeat: no-repeat;
}
width: 100%; height: 360px;
float: right;
&--main {
#extend .top-image;
background-image: URL("/img/epicFrontPage.png");
height: 500px;
}
&--syshack {
#extend .top-image;
background-image: URL('/img/SysHackGamePhoto.png');
}
}
.quarter-image {
float: right;
width: calc(25%);
}
/* ELEMENTS & ID'S */
#wrapper {
max-width: 1080px; width:100%; min-width:720px;
height: 100%;
margin: 0 auto;
}
header {
float: left;
width: 100%; height: $headerHeight;
#extend .blueGradient;
nav {
background: $navBackground;
height: $navHeight;
}
h1 {
display: inline-block;
color: $font-color-light;
margin-top: $titlePosition;
margin-left: 290px;
font-size: $font-size-xl;
#media screen and (max-device-width: $media-mobile-med) {
margin-top: 15px;
font-size: $font-size-xxl;
}
}
#teg-brain {
position: absolute;
top: $imgPosition;
}
}
#nav-menu {
float: right;
margin: 0; padding: 0;
li {
display: inline-block;
#extend %reset;
color: $font-color-light;
text-decoration: none;
font-size: $font-size-nav;
a {
display: inline-block;
color: inherit;
text-decoration: inherit;
font-size: inherit;
padding: 18px $gutter;
#media screen and (max-device-width: $media-mobile-med) {
padding: 10px $gutter;
}
}
& > ul.submenu {
position: absolute;
top: $navHeight;
//margin-left: 22px;
padding-left: 0;
display: none;
z-index: 10;
li {
background-color: rgb(64,64,64);
display: block;
a { display: block; padding: 18px $gutter; }
&:hover {
background-color: rgb(128,128,128);
}
}
#media screen and (max-device-width: $media-mobile-med) {
margin-left: 51px;
}
}
&:hover {
background-color: rgba(255,255,255,.2);
& ul.submenu {
display: block;
}
}
#media screen and (max-device-width: $media-mobile-med) {
font-size: $font-size-xl;
// padding: 9px $gutter;
}
}
}
#main {
float: left;
width: 100%;
background-color: $contentBackgroundColor;
min-height: calc(100% - #{$headerHeight} );
//overflow-y: auto;
//overflow-x: hidden;
}
#latest-news {
font-size: 16px;
float: left;
width: calc(100% - 2 * #{$gutter});
#media screen and (max-device-width: $media-mobile-med) {
font-size: $font-size-large;
}
}
#BMG-meetup {
margin: $gutter;
#media screen and (max-device-width: $media-mobile-med) {
display: none;
}
}
blockquote {
background-color: $contentBackgroundColor - #111;
border-left: $gutter solid #{$contentBackgroundColor - #333};
margin: 1.5em $gutter;
padding: 0.5em $gutter;
quotes: "\201C""\201D";
&:before {
color: $font-color-med;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
p { display: inline; }
}
/*
#sidebar {
float: left;
background-color: $sidebarColor;
width: $sidebarWidth - 2 * $gutter;
min-height: calc(100% - #{$headerHeight} );
}
*/
#mc_embed_signup {
float: right;
width: $sidebarWidth;
font:14px Helvetica,Arial,sans-serif;
#media screen and (max-width: $media-narrow) {
display: none;
}
}
#mc_embed_signup input.button { display: inline-block; }
#mc_embed_signup input.email { display: inline-block; }
I changed the font size to 2em in this media query and it seems to look better.
#media screen and (max-device-width: 720px)
.game-box, .game-box--right {
margin: 20px;
width: calc(100% - 4 * 10px);
font-size: 2em;
}
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.