I'm trying to add full responsiveness to my website. But, for some reason, it won't read parts below 980px of width. Here's my CSS:
#media screen and (max-width:1029px){
h1{
font-size: 75px;
}
h2{
font-size: 25px;
}
}
#media screen and (max-width:980px){
h1{
font-size: 70px;
}
h2{
font-size: 20px;
}
}
#media screen and (max-width:954px){
h1{
font-size: 65px;
}
h2{
font-size: 15px;
}
}
The 980px part is the last that can be read, if I change it to 979px it stops reading it, as if it wasn't there. !important doesn't change anything. What can I do? Why is there a magical barrier of 980px?
Make sure you got <meta name="viewport" content="width=device-width,initial-scale=1"> in <head> element
I think you should realigned your media, it will be work for you may be.
I make a fiddle and it's working as you want with media query
working fiddle
#media screen and (max-width:954px) {
h1 {
font-size: 65px;
}
h2 {
font-size: 15px;
}
}
#media screen and (max-width:1029px) {
h1 {
font-size: 75px;
}
h2 {
font-size: 25px;
}
#media screen and (max-width:980px) {
h1 {
font-size: 70px;
}
h2 {
font-size: 20px;
}
}
}
Related
I woud like that if my viewport width is smaller than 330px, the paragraphs font will be 9px, whatever its height.
In the same time, I also would like that if my viewport height is smaller than 330px, the paragraphs font will be 9px, whatever its width.
I have tried different orders, with or without !important keywords, I can't achieve the expected result.
There is always either the width or the height rule which conflicts with the other.
Could I handle such situation in CSS?
Here is my code :
p{
font-size: 16px;
}
#media (max-width:600px){
p{
font-size: 14px;
}
}
#media (max-width:440px){
p{
font-size: 12px;
}
}
#media (max-width:330px){
p{
font-size: 9px;
}
}
#media (max-height:600px){
p{
font-size: 14px;
}
}
#media (max-height:440px){
p{
font-size: 12px;
}
}
#media (max-height:330px){
P{
font-size: 9px;
}
}
Just use logic for #media queries. You can read more about them here.
For your problem solution would be code below (as comma creates a OR condition)
#media (max-width: 330px), (max-height: 330px) {
p { font-size: 9px; }
}
I have 8 boxes on my html file, when viewing on the desktop, everything looks OK, visited on the mobile and the colums are way off than it should be, it should be in the center, not in the right side, how would i do that to make it responsive?
Preview
My code for the columns.
.articles {
margin: 100px;
background-color: #F5F5F5;
}
.article {
margin: 5px;
display: inline-block;
width: 340px;
position: relative;
float:left;
left: 155px;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
}
.article-image {
width: 100%;
}
.article-text-wrapper {
padding: 20px;
}
.article-title {
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 700;
}
.article-description {
font-family: 'Roboto', sans-serif;
line-height: 16px;
font-size: 16px;
color: rgba(0,0,0,0.7);
font-weight: 300;
}
.article-time {
font-family: 'Roboto', sans-serif;
font-size: 12px;
color: rgba(0,0,0,0.4);
font-weight: 300;
}
Thanks alot.
You have left and margin properties applied to your article elements. You will need to add a media query for the following:
#media only screen and (max-width:700px) {
.articles {
margin: 50px 0;
}
.article {
left: 0;
width:100%;
}
}
The problem is that your article has fixed width, float and is displayed as inline-block.
Try by adding the following media query:
#media only screen and (max-width : 768px) {
.article {
margin: 0 auto;
display: block;
width: 100%;
max-width: 340px;
float: none;
left: auto;
}
}
When making responsive web pages, add the following element in all your web pages:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Set CSS width property is set to 100% for images, the image will be responsive and scale up and down. And also use max-width property.
For better responsive design use Media Queries.
#media screen and (max-width: 800px) {
.class-name {
width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
}
}
Refer here
Is it possible to write CSS for that affects a screen only when width is 755.4px - 991.4px?
I've tried the below but it also affects anything larger then #media (min-width: 767px) and (max-width: 768px)
#media (min-width: 755.4px) and (max-width: 991.4px)
#sliderText{
top:90px !important;
width: 85% !important;
}
#sliderText h1{
font-size: 1em !important;
}
}
The problem is, when the text is on a screen with width 755.4px - 991.4px, it goes on 2 lines and then it breaks the layout.
My original code is:
#ajax-content-wrap{
position:relative;
}
#sliderText{
position:absolute;
top:85%;
text-align:center;
margin-left:50px;
width:93%;
z-index:100;
}
#sliderText h1{
font-size: 4em;
font-weight: 600;
color: #31a6c7;
text-shadow: 2px 2px 2px #333;
}
#media (min-width: 767px) and (max-width: 768px) {
#sliderText{
top:90px !important;
width: 85% !important;
}
#sliderText h1{
font-size: 2em !important;
}
}
#media (max-width: 767px) {
#sliderText{
top: 84% !important;
width:75% !important;
//padding-left:50px;
//padding-right:50px;
}
#sliderText h1{
font-size: 1.7em !important;
}
}
You could try to do the following
Anything below 755.3px is small CSS
Anything above 991.4px is big CSS
Anything in the middle of that range is medium CSS
Here's a simplification of what that would look like:
/* Big CSS: Applies to everything unless overwritten */
#sliderText {
top: ;
width:
}
#sliderText h1 {
font-size:
}
/* Small CSS: Applies to small devices */
#media (max-width: 755.3px) {
#sliderText {
top: ;
width:
}
#sliderText h1 {
font-size:
}
}
/* Middle CSS: Applies to Devices in the middle of the range above */
#media (max-width: 991.4px) {
#sliderText {
top: ;
width:
}
#sliderText h1 {
font-size:
}
}
I've got this issue with h2 on iPhone-sized devices. The h2 goes off the center despite the code looks good. I can't figure out why it is happening.
h2 off center
Here's my code:
/* for iPhone-sized devices */ #media only screen and (max-device-width: 480px) {
.container { width: auto }
body { padding: 0 }
h1 { font-size: 1.5em; margin-bottom: 3em; text-align: left }
h2 { font-size: 2em; margin-bottom: 1.5em; text-align: center }
h3 { font-size: 1.8em }
h6 { font-size: 1em; text-align: left }
p {
font-size: 1.2em;
line-height: 1.4em;
}
My website is: mamufka.com.
Would love to hear some tips from you experienced guys!
Looks pretty good to me, but if you want to make it horizontally aligned, you should remove the margins from the left and the right:
h2 {
margin-left: auto;
margin-right: auto;
}
The text are actually bigger than the space you gave them because of that margin.
You have a general rule on your h2 element which is causing the margins to collide with the side before it aligns centrally.
Try this:
#media only screen and (max-device-width: 480px) {
h2 { font-size: 2em; margin: 0 0 1.5em 0; text-align: center }
}
Reduce the margin in #media queries. Like this:
#media only screen and (max-device-width: 480px){
h2 {
margin: 2em 0em 0 0em;
font-size: 2em;
margin-bottom: 1.5em;
text-align: center;
}
}
Please remove left/right margin from h2
h2 { font-size: 2em; margin: 0 0 1.5em; text-align: center }
Basically I'm playing around with these and I noticed that some of the properties do change as I want. Some (text-transform and font-size) have no effect (they work outside of the media query but not in). The p and #icon part work flawlessly, as well as color and font-family for .title, so I have zero clue as to why this happens.
Relevant code snippets:
#media only screen and (max-width: 1000px) {
p {
background-color: blue;
}
#icon {
display: none;
}
.title {
color: red;
text-transform: lowercase;
font-family: Arial;
font-size: 10px;
}
}
And for the regular screen size I have
.title {
text-transform: uppercase;
font-size: 35px;
font-weight: 300;
}
And in the HTML part
<h1 class="title" style="text-align: right; margin-bottom: 0px;">Jane Doette</h1>
For rules where the selectors are equally specific, the last one takes precedence.
Make the rule inside the media query more specific, for example changing .title to h1.title, or place the rules for regular screen size before the media query.
My guess is that your media query is placed before the non-media query style. If so, put your media query after: JS Fiddle - Media Query Last
.title {
text-transform: uppercase;
font-size: 35px;
font-weight: 300;
}
#media only screen and (max-width: 500px) {
p {
background-color: blue;
}
#icon {
display: none;
}
.title {
color: red;
text-transform: lowercase;
font-family: Arial;
font-size: 10px;
}
}
Otherwise, if the media query is first, the last styles in the style sheet will take precedent: JS Fiddle - Media Query First