I have some problem with input text to image, i use swiper slider for the image and i create a class to text like this,
#media screen and (min-width: 970px) {
.swiper-slide .title {
position: absolute;
top: 240px;
left: 10px;
color: white;
font-weight: bold;
font-size:12pt;
font-family: 'Mark Bold' !important;
}
.swiper-slide .medsos {
position: absolute;
top: 265px;
left: 10px;
color: white;
font-size: 10pt;
}
.swiper-slide .role {
position: absolute;
top: 285px;
left: 10px;
color: white;
font-size: 10pt;
}
}
I made the layout adjust to the size of 971px
#media screen and (max-width: 971px)
I tested 971px but when I used the size of the cell phone it disappeared,
did I have to make the layout of each pixel? How do you make the text responsive and the same location from the desktop version to the mobile version?
#media screen and (min-width: 970px) {
.swiper-slide .title {
position: absolute;
top: 240px;
left: 10px;
color: white;
font-weight: bold;
font-size:12pt;
font-family: 'Mark Bold' !important;
}
.swiper-slide .medsos {
position: absolute;
top: 265px;
left: 10px;
color: white;
font-size: 10pt;
}
.swiper-slide .role {
position: absolute;
top: 285px;
left: 10px;
color: white;
font-size: 10pt;
}
}
#media screen and (max-width: 971px) {
// put the style rules that you want to show in moblie devices
}
Related
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
I would like the text to spread all over the webpage top to bottom, left to right.
I did it using vw, vh sizes for text size, placed inside a div.
within the text, there are links (.href) of which size is slightly larger.
It currently works with mac 13inch 2015 but for some reason doesn't with 13 inch of 2017.
It also doesn't work on ipad 11 inch portrait.
I am new to media queries and might be doing it all wrong.
Looking forward to your responses! Many thanks.
body {
margin: 0;
height: 100%;
width: 100%;
}
#media only screen
and (min-width: 200px){
.div {
width: 97vw;
height: 97vh;
margin-right: auto;
margin-left: auto;
position: relative;
margin-bottom: 10vw;
}
.txt {
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: justify;
text-justify: inter-word;
line-height: 1.5;
font-size: 2.5vh;
}
.href {
color: #0000ff;
font-size: 3vh;
}
}
#media only screen and (min-width: 768px) and (max-width: 1024px) {
.div {
width: 97vw;
height: 97vh;
margin-right: auto;
margin-left: auto;
position: relative; /* text inside of div */
margin-bottom: 10vw;
}
.txt {
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: justify;
text-justify: inter-word;
line-height: 1.5;
font-size: 3vh;
}
.href {
font-size: 3.5vh;
}
}
#media screen and (min-width: 1025px) {
.div {
width: 97vw;
margin-right: auto;
margin-left: auto;
position: relative; /* text inside of div */
margin-bottom: 10vw;
}
.txt {
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: justify;
text-justify: inter-word;
line-height: 1.5;
margin-bottom: 1rem;
font-size: 2.5vw;
}
.href {
font-size: 3vw;
}
}```
I am a bit confused here... I found some common breakpoints to use for my css media query but am only using max-width such as #media screen and (max-width: 812px) {} etc but it seems to be moving my other media queries around. I thought that this should only affect the code that is 812px or less. Do I need to add both a min-width and max-width to solve the issue ?
#media only screen and (max-width: 50em) and (orientation: portrait) {
label {
width: 100%;
display: block;
position: relative;
}
.nav {
width: 200%;
}
#nav-icon {
font-size: 28px;
line-height: 50px;
padding-left: 1em;
color: #ffffff;
background-color: #f44336;
}
div.nav ul, div.nav li, label{
line-height: 50px;
margin: 0;
padding: 0 2em;
list-style: none;
text-decoration: none;
color: #000;
font-weight: 100;
width: 150%;
position: relative;
font-size: .9em;
}
div.header2_welcome h1{
text-align: center;
font-family: 'Pacifico', cursive;
font-size: 1em;
position: absolute;
top: 5em;
left: 0em !important;
text-decoration: none;
white-space: nowrap;
}
img.pc101 {
width: 20em;
height: 7em;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 27em;
margin-left: -15em;
font-size: .8em;
}
div.natural {
font-size: 150px;
position: relative;
right: .5em;
top: 2em;
animation: drop 2s ease forwards;
margin-bottom: 1em;
}
div.flat {
font-size: 150px;
position: relative;
left: 1200px;
bottom: 450px;
top: 8em;
}
div.treble_clef {
font-size: 100px;
position: relative;
right: 400px;
bottom: 400px;
}
div.crotchet_rest {
font-size: 6em;
position: relative;
left: 100px;
bottom: 800px;
}
div.crotchet {
font-size: 6em;
position: absolute;
left: 3.5em !important;
top: 3em;
animation: drop 2s ease forwards;
}
div.minim {
font-size: 6em;
position: absolute;
left: 1.5em;
top: 2em;
animation: drop 2s ease forwards;
}
}
This is only a sample of my code but don't know it is moving my other media queries around..
I think the following code will help you.
<style>
#media only screen and (max-width:768px) and (min-width:200px)
{
/* Your CSS Code */
}
</style>
The media query may have a lots of condition
only for screen of less than 500px
#media only screen and (max-width:500px)
only for screen between 200px and 500px
#media only screen and (min-width:200px) and (max-width:500px)
only for screen more than 500px
#media only screen and (min-width:500px)
only for screen on every size
#media only screen
only for print on every size
#media only print
only for sqare screen
#media (aspect-ratio: 1/1)
only for sqare screen
#media (aspect-ratio: 1/1)
only for screen of aspect ratio superior to : 16/9
#media (-max-aspect-ratio: 16/9)
ecc.. you can specify pixel-ratio or dpi to better fit your need
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