I'm working on a WordPress page with a new layout I added to Flexible Content Template customer field. I found the .scss file where the styles should be placed in, but not sure how to convert my CSS into .scss format. Below is the CSS I want to change to SCSS.
.hero-with-text-cta-hero {
background-color: #ececec;
}
.texts-and-cta {
position: absolute;
top: 2rem;
right: 4rem;
width: 40%;
text-align: right;
}
.texts-and-cta-col {
position:static !important;
}
.texts-and-cta h2 {
margin-left: 1rem;
margin-right: 1rem;
font-size: 1.8rem !important;
font-family: Roboto, sans-serif !important;
text-transform: none !important;
letter-spacing: normal !important;
font-weight: 400 !important;
color: #a6a2a3 !important;
}
#media (max-width: 959px) {
.texts-and-cta {
position: relative;
top: 0;
right: 0;
width: 100%;
text-align: center;
padding-top:1rem;
}
}
.hero-with-text-cta-hero h1 {
color: #666766 !important;
}
#media (min-width: 1280px) {
.hero-with-text-cta-hero h1 {
font-size: 4rem !important;
}
}
Just copy it into .scss file, sass can handle normal css
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.
My coding knowledge is next to none but I have been getting by ok with the use of Joomla and preset templates etc. But now I've hit the brick wall head first. While the two banners (right and bottom) are displayed correctly on desktops and tablets, only bottom one is displayed on phones.
Here's the site: http://www.chokladsajten.com
How do I get both to be displayed on smaller screens? (A bonus would of course be if they also were responsive.) Any help or ideas are appreciated!
Custom.css:
#font-face {
font-family: 'DroidSerifBoldItalic';
src: url('../fonts/DroidSerif-BoldItalic-webfont.eot');
src: url('../fonts/DroidSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/DroidSerif-BoldItalic-webfont.woff') format('woff'),
url('../fonts/DroidSerif-BoldItalic-webfont.ttf') format('truetype'),
url('../fonts/DroidSerif-BoldItalic-webfont.svg#DroidSerifBoldItalic') format('svg');
font-weight: normal;
font-style: normal;
}
/* Logo */
.custom-logo {
width: 104px;
height: 70px;
background-image: url(../../../images/yootheme/logo.png);
background-position: 0 0;
background-repeat: no-repeat;
background-size: contain;
}
/* Only Phones */
#media (max-width: 767px) {
#header-responsive .logo { margin-bottom: 10px; }
}
/* Parallax Effect */
.box-parallax { background-image:
url(../../../images/yootheme/demo/teaser/home_teaser_default.jpg); }
.box-parallax h1 { font-family: "DroidSerifBoldItalic", "TimesNewRoman",
"serif"; }
/* Frontpage Title */
.bigger-title {
margin-top: 0;
margin-bottom: 10px;
font-size: 24px;
line-height: 24px;
}
/* Frontpage List Line */
ul.line.frontpage > li {
margin-top: 30px;
padding-top: 30px;
}
ul.line.frontpage > li:first-child {
margin-top: 0;
padding-top: 0;
}
/* Only Tablets (Portrait) */
#media (min-width: 768px) and (max-width: 959px) {
.frontpage-teaser { height: 280px; }
.frontpage-teaser h2 {
margin-bottom: 0;
line-height: 75px;
font-size: 68px;
}
.frontpage-teaser h4 {
line-height: 28px;
font-size: 23px;
}
}
/* only phones */
#media (max-width: 767px) {
.frontpage-teaser { height: 150px; }
.frontpage-teaser h2 {
margin-top: 10px;
margin-bottom: 0;
line-height: 50px;
font-size: 40px;
}
.frontpage-teaser h4 {
margin-top: 0;
font-size: 12px;
line-height: 16px;
}
}
#banner {
position: absolute;
top: 0;
right: -230px;
}
#footer {
position: center;
bottom: 30px;
}
}
You can specify custom styles for the 1220px breakpoint like this:
#media (max-width: 1220px) {
#banner {
display: block;
position: static;
margin-top: 1.5em;
text-align: center;
}
.bannerItem img {
width: 100%;
height: 150px;
}
}
In your current version, for this breakpoint #banner have a property display: none;, therefore it fades away once the window's width exceeds 1220px
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 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.
SOLVED: Tom: You were so right. Unfortunately WordPress function wp_head() was adding the width=1100 because of a plugin. Thanks!
I'm working on a new responsive website, but can't seem to get the #media query to work.
It does work when resizing the browser window on my desktop, but it won't work on my ipad, iphone or android phone.
What am I doing wrong?!
Here the link: http://demo.mindspins.com/atmnieuw/
Here's the link to the CSS: http://demo.mindspins.com/atmnieuw/wp-content/themes/atm/css/dynamic.php
Thanks in advance!
On request the CSS code:
#media all and (max-width: 1460px) {
.site-width{ width: 1199px; }
.main-width{ width: 719px; }
}
#media all and (max-width: 1220px) {
.site-width{ width: 959px; }
.main-width{ width: 479px; }
#page-title h1.thetitle{
font-size: 20px;
line-height: 24px;
}
.sidebar .widget a.form-button-link, .sidebar .widget span.form-button-link{
font-size: 20px;
line-height: 24px;
}
}
#media all and (max-width: 980px) {
.site-width{ width: 719px; }
.main-width{ width: 479px; }
.right-width{ display: none; }
#header-right{ display: none; }
.widgets-wrapper-1{ display: block; }
.widgets-wrapper-3{ display: block; position: relative; padding: 20px 0 0 20px; }
}
#media all and (max-width: 740px) {
.site-width{ width: 95%; margin: 0 auto;}
#header-wrapper{ width: 100%; }
#header-left{ display: none; }
#header-mid{ height: 80px; }
#atmlogo a.atm {
z-index: 100;
top: 24px;
left: 0;
}
.main-width{ width: 100%; }
.left-width{ width: 100%; }
.sidebar-left{ display: none; }
.site-bg{ display: none; }
#header-left span.header-contact{ height: 80px; width: 100%;}
#main-nav{ height:auto !important; }
#mobile-nav{
margin: -4px 0 1px 0;
display: block;
position: relative;
width: 100%;
}
#mobile-nav .nav-wrapper{
display: block;
color: #fff;
background: #cc0033;
margin: 1px 0;
height: 40px;
padding: 0 10px;
}
#mobile-nav .nav-wrapper select.atm-dropdown{
font-size: 12px;
display: block;
height: 40px;
width: 100%;
color: #fff;
background: #cc0033;
border: 0;
clear: both;
-webkit-border-radius: 0;
-webkit-appearance: none;
}
#mobile-nav .theme-s{
width: 100%;
background: #cc0033;
color: #fff;
}
#mobile-nav input.s{
background: #cc0033;
color: #fff;
}
#mobile-nav input.searchsubmit{
border-left: solid 1px #dcdcdc;
color: #fff;
background: #cc0033;
background-image: url(../images/icon_search.png);
background-repeat: no-repeat;
background-position: right top;
-webkit-border-radius: 0;
-webkit-appearance: none;
}
#primary{ display: none; }
#main-content-header{
height:auto !important;
margin: 0 0 1px 0;
}
#main-content-header span.header-image{
display: block;
float: left;
width: 25%;
height:auto !important;
margin: 0;
}
#main-content-header span.header-image img{
line-height: 0px;
margin: 0;
padding: 0;
}
#page-title{
height: 79px;
}
}
#media all and (max-width: 500px) {
body {
font-size: 12px;
line-height: 20px;
}
#footer-nav{ display: none; }
#copyrights{ display: none; }
.entry-content-bg{ padding: 20px; }
#page-title .title-wrapper{ padding: 0 20px }
#page-title h1.thetitle{
font-size: 16px;
line-height: 20px;
}
}
You can use this code in the head tag:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
On looking again, when using my iPhone 4S and the Remote Web Inspector introduced in iOS 6, I couldn't find any styles for anything below max-width: 1200px, even though they are in the CSS file. I don't know why this is.
Also, I wrote a blog post about Responsive design and Media Queries a few months, you can read it here if you wish. Not saying you're not good at media queries (it's a very nice site!) just hope it will be an interesting read for you :)
EDIT: just looking at your site again, I noticed in the head (right at the bottom) you have this code:
meta name="viewport" content="width=1100"
This could be why the styles weren't applying at anything below a screen width of 1100px or 1200px. Take this out and try it again.
It might have something to do with having your CSS in seperate files. As a general rule you should always write all your CSS in one file (style.css). It shouldn't do but just for clarity put them both in the same file and see what happens. If it doesn't work comment on this and I'll take another look.