I created a _mobile.scss to add responsive design to my website but some of my media queries are not overriding the default styles. I checked other posts on this topic which talked about 'specificity' but I made sure that the _mobile.scss is imported in the style.scss after the _home.scss (where I'm currently styling)
this is the content of styles.scss:
#import 'utilities/config';
#import 'layout/sidebar';
#import 'pages/home';
#import 'layout/mobile';
this is the _mobile.scss :
/
* Large screens */
#media screen and (min-width: 600px) {
.navbar {
top: 0;
left:0;
width: 8rem;
height: 100vh;
}
.navbar:hover {
width: 20rem;
}
.navbar:hover .link-text {
display: inline;
}
}
/* Small screens */
#media screen and (max-width: 800px) {
.banner-wrapper{
img{
width:50%;
}
}
.intro-text{
h1{
font-size: 2rem;
}
.typing::after{
height:50%;
}
}
.about-content{
flex-direction: column;
img{
width:100%;
}
p{
font-size: 1.5rem;
}
}
}
#media screen and (max-width: 600px) {
.navbar {
bottom: 0;
left:0;
width: 100%;
height: 5rem;
z-index:1;
}
.logo {
display: none;
}
.navbar-nav {
flex-direction: row;
width: 100%;
}
.nav-link {
justify-content: center;
height: 5rem;
i{
font-size: 2rem;
}
}
main {
margin: 0;
}
}
And this is a portion of the _home.scss(the part that isn't working):
#banner{
position: relative;
top: -5rem;
width: 100%;
height: 100vh;
}
.banner-wrapper{
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1rem;
img{
margin-left: auto;
margin-right: auto;
display: block;
width: 30%;
margin-bottom: 3rem;
}
.intro-text{
text-align: center;
h1{
font-size: 5rem;
text-transform: uppercase;
margin-bottom: 0;
margin-top: 0;
}
.typing{
position: relative;
margin-left:10px;
}
.typing::after{
content: "";
position: absolute;
right: -2px;
width:1px;
height: 100%;
border-right: 2px solid black;
animation: blink 0.5s infinite ease;
}
}
}
Where I'm confused is that I am able to change the img width of the .banner-wrapper on small screens (less than 800px) but changing the font-size of the h1 and height of .typing::after in .intro-text has no effect. So how can I fix this? Thank you in advance
After checking your code i found that in your _home.scss the .intro-text is wrapped inside .banner-wrapper whereas in your media query you're defining the .intro-text outside the .banner-wrapper double check it by defining the .intro-text inside the brackets of .banner-wrapper in the _mobile.scss and it might be the problem.
Related
I created a basic example to illustrate the problem: https://codepen.io/itsechi/pen/wvmQEJb.
HTML:
<body>
<header>
<h1>RANDOM TEXT</h1>
<h1>MORE RANDOM TEXT</h1>
<header>
<main class="contact-main">
<section class="contact-section">
<h2>CONTACT US</h2>
<p>Random text here Random text here Random text here</p>
<p>Random text here Random text here Random text here</p>
</section>
<img src="https://i.imgur.com/g6xj3zE.jpg">
</main>
</body>
CSS:
html {
box-sizing: border-box;
font-size: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
font-family: "League Spartan", sans-serif;
font-weight: 700;
color: #fff;
text-align: center;
background-color: #1B191A;
position: relative;
display: flex;
justify-content: center;
}
body::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url("https://i.imgur.com/TJA3v8q.jpg") no-repeat center/cover;
z-index: -1;
opacity: 0.4;
}
.contact-main {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.contact-section {
-moz-text-align-last: left;
text-align-last: left;
margin: 3rem;
font-weight: 500;
font-size: 1.3rem;
}
#media (max-width: 69.375em) {
.contact-section {
margin: 1rem;
margin-top: 2rem;
}
}
#media (max-width: 34.375em) {
.contact-section {
font-size: 0.9rem;
}
}
#media (max-width: 21.875em) {
.contact-section {
font-size: 0.6rem;
margin: 0.4rem;
}
}
.contact-section h2 {
font-weight: 500;
letter-spacing: 0.15em;
margin-bottom: 1.5rem;
}
#media (max-width: 34.375em) {
.contact-section h2 {
font-size: 1.2rem;
}
}
.contact-section button {
font-family: inherit;
padding: 0.5rem 1rem;
margin-top: 1.5rem;
letter-spacing: 0.15em;
color: #CCAB5B;
background: none;
border: 2px solid #CCAB5B;
font-size: 1rem;
cursor: pointer;
}
.contact-section button:hover {
background-color: #CCAB5B;
color: #000;
}
#media (max-width: 34.375em) {
.contact-section button {
font-size: 0.7rem;
}
}
#media (max-width: 21.875em) {
.contact-section button {
font-size: 0.5rem;
padding: 0.3rem 0.8rem;
}
}
img {
border-radius: 50%;
margin-top: 3rem;
border: 3px solid #CCAB5B;
width: 30rem;
}
#media (max-width: 69.375em) {
img {
position: absolute;
top: 80%;
width: 20rem;
}
}
#media (max-width: 34.375em) {
img {
width: 12rem;
}
}
When I resize the page to see how it looks on smaller screens the background image only fills up the height of the viewport of body and the rest of the container is just background color. The issue is best seen if you try to check how the site looks on Nest Hub in devtools. How can I stop this from happening and make the background image either repeat or better, just fill the entire space when the page becomes scrollable? Thanks.
There are plenty of properties you can implement and combine:
background-position
background-attachment
background-repeat
background-size
if you want to repeat an image you should look into background-repeat. Otherwise you should combine those properties:
body {
background: url('https://via.placeholder.com/1920x1080.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* for demo purpose only */
body {
min-height: 500vh;
}
I think I found out what was causing the problem - it was the absolute positioning of the img. I simply changed the display of the main element to be a grid on smaller devices and now the background is working as it should!
#media (max-width: 69.375em) {
.contact-main {
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-items: center;
}
}
.contact-section {
-moz-text-align-last: left;
text-align-last: left;
margin: 3rem;
font-weight: 500;
font-size: 1.3rem;
grid-row: 1/2;
}
#media (max-width: 69.375em) {
img {
width: 20rem;
grid-column: span 2;
}
}
First, I want to state that I am not a web designer, but I am trying to search for solutions.
At the moment I am at loss, as I cannot figure out why a logo I am trying to add on a footer does not scale with resolution.
In fact, it is displaying it in full resulation only.
There is another logo in the footer that is scaling when resolution changes.
When I paste the code in TryIt, it is working, but once I put it on server, the image is in full resolution always.
Here is the TryIt link - https://www.w3schools.com/code/tryit.asp?filename=GRDOYEDNJX5K
As tyou can see, here the code would work.
What I have done is defined the image in footer.php
<div class="logo5">
<img src='https://i.ibb.co/42Lgdw7/8a2403c4b0d344d5ae7c3762c74fddb4-0001.jpg' class="logo5">
</div>
And added to CSS these lines
.logo5 {
width: 100%;
height: auto;
}
This is the rest of _footer.scss file
.footer-wrapp {
background-image: url("../../images/footer_back.jpg");
background-position: top;
background-size: cover;
background-repeat: no-repeat;
.container {
width: 100% !important;
max-width: unset !important;
}
.additional-info {
padding: 30px 0;
#media screen and (max-width: 992px) {
padding: 30px 0 15px;
}
h4 {
color: #fff;
}
p {
color: #7d7d7d;
}
}
#myFootNavWrapp {
margin: 60px 15% 0;
#media screen and (max-width: 1600px){
margin: 60px 5% 0;
}
#media screen and (max-width: 992px) {
margin: 0;
padding-left: 0;
padding-right: 0;
justify-content: space-between;
}
#media screen and (max-width: 520px) {
align-items: flex-start;
padding-top: 25px;
}
a {
color: #6377a4;
margin-right: 20px;
&:hover {
text-decoration: none;
border-bottom: 2px solid $main__red;
}
}
.mobile-logo-wrapp {
display: none;
margin-left: 20px;
#media screen and (max-width: 992px) {
display: inline-block;
}
a {
display: inline-block;
width: 45px;
height: 45px;
background-image: url("../../images/logo.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
}
#navFoot {
border-radius: 10px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
#media screen and (max-width: 992px) {
display: flex;
justify-content: center;
align-items: center;
}
.customFootNav {
flex-grow: 1;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
list-style-type: none;
flex-wrap: wrap;
width: 100%;
#media screen and (max-width: 520px) {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
li {
flex-grow: 1;
min-width: 5%;
a {
color: $main__dark_blue;
border-bottom: 2px solid transparent;
transition: all 0.2s linear;
font-weight: 600;
}
&:hover {
a {
text-decoration: none;
border-bottom: 2px solid $main__red;
}
}
}
}
.privacyFootNav {
flex-grow: 1;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
list-style-type: none;
flex-wrap: wrap;
width: 100%;
#media screen and (max-width: 520px) {
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
}
#media screen and (min-width: 520px) and (max-width: 788px) {
margin-left: 92px;
}
li {
flex-grow: 1;
min-width: 5%;
a {
color: #6377a4;
border-bottom: 2px solid transparent;
transition: all 0.2s linear;
font-weight: 400;
}
&:hover {
a {
text-decoration: none;
border-bottom: 2px solid $main__red;
}
}
&.current-menu-item {
a {
text-decoration: none;
border-bottom: 2px solid $main__red;
}
}
}
}
.additional-wrapp {
flex-grow: 1;
}
.custom-menu-logo {
position: relative;
height: 95px;
min-width: 200px;
#media screen and (max-width: 1500px) {
min-width: 175px;
}
#media screen and (max-width: 1200px) {
min-width: 150px;
}
#media screen and (max-width: 992px) {
min-width: unset;
width:90px;
margin-right: 20px;
}
#media screen and (max-width: 520px){
display: none;
}
&:before {
content: '';
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
margin: 0 auto;
background-image: url("../../images/Logo_Red.jpeg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
transition: all 0.2s linear;
}
a{
outline: none;
display: block;
z-index: 9999;
position: absolute;
width: 100%;
height: 100%;
}
&:hover {
border: none;
a {
border: none;
}
}
}
}
}
}
Is there anything that would interfere with the logo I am trying to add to not scale?
Thank you.
I noticed that you're using wordpress, I already had problems while customizing themes and files this way, because wordpress theme sometimes overwrite your style and that's is bad.
To avoid it, I needed to put the css !important property, this way you force your style over any other that not have this property.
Maybe it's not the best appraoch, but worked for me, you should give a try.
.logo5 {
width: 100% !important;
height: auto !important;
}
I'm having some issues implementing media queries. I just made all the media queries I need. But it seems that now when I'm testing it my normal view (desktop has also changed for some reason) and when I go to the first media queries size. I can see that some elements like #taglineand #login-form are not adopted from the media queries but from a smaller size media queries same goes for normal view. They both adopted changes from this size #media only screen and (min-height: 768px) and (min-width: 1024px) instead of the things I specified for it. I don't understand what is going wrong here
regular scss:
#login-container {
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
#side {
width: 30%;
background-color: $plain-white;
display: flex;
flex-direction: column;
padding: 20px;
border-right: 1px solid #ECECEC;
#side-caption {
width: 80%;
margin: 100px auto;
#appoint-full-logo {
width: 80%;
}
#tagline {
margin-top: -30px;
color: rgba(2, 159, 157, 1);
font-weight: 500;
font-size: 1.73em;
}
}
}
#login {
width: 70%;
height: 100%;
background-color: rgba(2, 159, 157, 1);
#login-form {
height:80% ;
width:80% ;
background-color: $plain-white;
margin: 130px auto;
border-radius: 5px;
display: flex;
flex-direction: column;
div {
height: 20%;
#welcome {
text-align: center;
font-weight: 550;
font-size: 2.5em;
margin-top: 50px !important;
color: #E8A87C;
}
}
#apply-text {
height: 15%;
font-size: 0.9em;
width: 70%;
margin: auto;
font-weight: 500;
// text-align: center;
}
#apply-form-fields,
#login-form-fields {
height: 45%;
display: flex;
flex-direction: column;
margin-left: 16%;
:first-child {
margin-top: 10px;
}
.form-group {
margin: 10px 0px;
width: 80%;
label {
font-weight: 500;
}
}
}
#apply-submited {
height: 10%;
width: 70%;
margin: auto;
p {
background-color: rgba(85, 255, 214, 0.50);
padding: 10px;
text-align: center;
font-weight: 600;
border-radius: 5px;
;
}
}
.button-field {
height: 20%;
.button {
cursor: pointer;
width: 70%;
height: 40%;
color: $white;
font-size: 1.1em;
margin: 10px auto;
background-color: #E8A87C;
border: none;
padding: 10px;
font-weight: 600;
border: solid 5px #E8A87C;
border-radius: 5px;
text-align: center;
&:hover {
color: #E27D60;
}
}
.change-form {
cursor: pointer;
text-align: center;
span {
font-weight: 600;
}
&:hover span {
color: #E8A87C;
}
}
}
}
}
}
Media queries located at bottom of style cheat
set media queries:
#media only screen and (min-width: 1366px) and (min-height: 1024px) {
#tagline {
margin-top: -17px !important;
font-size: 1.52em !important;
}
}
#media only screen and (min-width: 1024px)and (min-height: 1366px) {
#tagline {
margin-top: -17px !important;
font-size: 1.05em !important;
}
#appoint-full-logo {
width: 100% !important;
}
}
#media only screen and (min-width: 1024px)and (min-height: 768px) {
#tagline {
margin-top: -15px !important;
font-size: 1.05em !important;
}
#appoint-full-logo {
width: 100% !important;
}
#login-form {
width: 60% !important;
height: 80% !important;
margin-top: 110px !important;
}
#welcome {
font-size: 2em !important;
}
}
#media only screen and (min-width: 768px)and (min-height:1024px) {
#tagline {
margin-top: -10px !important;
font-size: 0.76em !important;
}
#appoint-full-logo {
width: 105% !important;
}
#login-form {
width: 80% !important;
height: 60% !important;
margin-top: 110px !important;
}
#welcome {
font-size: 1.9em !important;
}
}
1.
#media only screen and (min-height: 768px) and (min-width: 1024px) --- perhaps your window/browser height is Below 768px
2.
The ! IMPORTANT -flag often causes problems in code
3.
Your code in media-queries.scss should be nested in the same way
regular.scss is nested too
You might be overusing the !important keyword. When you’re using it, it states any other rule is overridden. Since the smaller media queries are what are looked at/executed first when the media query is set to min-width or min-height, you are probably instructing css to say “I see there are larger media queries, but I’ve been instructed by a smaller media query to honor its rules first and for most.
The CSS inside you media queries needs to be nested exactly like in your regular style rules.
Otherwise they get assigned more importance.
You might check this Codepen out.
#container {
#color {
height: 50vh;
background-color: red;
}
}
#container2 {
#color2 {
height: 50vh;
background-color: blue;
}
}
#media (min-width: 768px) {
/* not affected by querie */
#color {
height: 50vh;
background-color: blue;
}
/* affected by querie */
#container2 {
#color2 {
background-color: green;
}
}
}
<div id="container">
<div id="color"></div>
</div>
<div id="container2">
<div id="color2"></div>
</div>
I'm making a navbar for my site following a tutorial. While working on my mobile menu responsiveness I made a ".burger" class with three "bars" to represent the menu. For some reason the menu icon doesn't show at all.
Code: https://gist.github.com/VlatkoStojkoski/290234f49a6f4e51019ca4b014c03f37
You have wrong css selector in media query.
add this to #media screen and (max-width: 775px).
nav .burger {
display: block;
}
It's because you set display: none to the menu. Even though you added a media query with display: block on the bottom, the first one will always rule.
You should add a media query to the first rule and you can remove the display: block on the bottom.
.burger {
#media screen and (min-width: 775px) {
display: none;
}
}
So this is your complete code:
#import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap");
$text-color: whitesmoke;
$font-stack: "Source Sans Pro", sans-serif;
$nav-color: rgba(79, 91, 102, 0.8);
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 12vh;
font-family: $font-stack;
background-color: $nav-color;
h1 {
letter-spacing: 5px;
font-size: 30px;
color: $text-color;
}
img {
width: 64px;
}
ul {
display: flex;
width: 35%;
justify-content: space-around;
a {
font-size: 21px;
color: $text-color;
text-decoration: none;
}
li {
list-style: none;
}
}
.burger {
#media screen and (min-width: 775px) {
display: none;
}
div {
width: 30px;
height: 4px;
background-color: $text-color;
margin: 5px;
}
}
}
#media screen and (max-width: 1024px) {
nav ul {
width: 50%;
}
}
#media screen and (max-width: 775px) {
body {
overflow-x: hidden;
}
nav ul {
position: absolute;
right: 0px;
height: 88vh;
top: 12vh;
background-color: $nav-color;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
li {
opacity: 0;
}
}
}
I am trying to fix a CSS created by someone else(I took over a job from a other company for my current client)
As for now everything working in my website except on my Samsung Galaxy S8. The footer doesnt follow the rules. I have putted everything I could find online with
#media only screen and (min-width: 360px) and (max-width: 767px) {
/* Your Styles... */
}
But still when I'm going on the website on my S8. The text in a specific part that I want to follow rules..doesnt. (Part is Footer-right2)
On iPad, Desktop its working except this.
Any ideas ?
Here my CSS :
#media and (min-width: 360px) and (max-width: 767px) {
#footer .footer-wrapper .footer-right2 {
text-align: center;
font-size: 0.5em;
font-weight: 300;
padding-left: 15px;
margin:auto;
max-width:200px;
}
#footer .footer-logo {
display: inline-block;
padding-left: 15px;
margin:auto; } }
It's working for other size so here one of them as exemple :
#media (max-width: 768px) {
#header .header-wrapper {
height: 85px; }
#header .header-toggle-menu {
position: fixed;
top: 30px;
right: 15px;
z-index: 7000;
display: block; }
#header .header-toggle-menu span {
display: block;
width: 42px;
height: 7px;
border-radius: 3px;
background-color: #1d1d1d;
transition: background-color 0.175s linear; }
#header .header-toggle-menu span + span {
margin-top: 4px; }
#header .header-menu {
position: fixed;
right: 0;
top: 0;
bottom: 0;
z-index: 6000;
padding: 7px;
width: 300px;
background-color: #08ab0f;
padding-top: 85px;
transform: translateX(300px);
transition: transform 0.225s ease-in-out; }
#header .header-menu a {
display: block;
padding: 7px;
font-size: 0.85em;
font-weight: 900;
color: #ffffff;
transition: none;
background-color: #e13649;
margin-bottom: 7px; }
#header .header-menu a:hover, #header .header-menu a:focus {
color: #ffffff; }
#header.active .header-menu {
transform: translateX(0); }
#header.active .header-toggle-menu span {
background-color: #ffffff; }
#footer .footer-wrapper .form-message {
top: 85px; }
#footer .footer-wrapper .footer-right2 {
text-align: center;
font-size: 0.5em;
font-weight: 300;
padding-left: 15px;
margin:auto;
max-width:200px;
}
#footer .footer-logo {
display: inline-block;
padding-left: 15px;
margin:auto; }
#page {
padding-top: 85px; }
.slider-container {
height: 530px;
background-color: #08ab0f; }
.slider-container .slider-slides {
height: 500px; }
.slider-container .slider-slides .slides-item {
position: relative; }
.slider-container .slider-slides .slides-item .item-left, .slider-container .slider-slides .slides-item .item-right {
position: absolute;
top: 0;
left: 0;
right: auto;
width: 100%;
height: 100%; }
.slider-container .slider-slides .slides-item .item-left {
z-index: 100;
background-color: rgba(0, 0, 0, 0.3);
text-align: center; }
.slider-container .slider-slides .slides-item .item-right {
z-index: 50; }
.slider-container .slider-navigation {
position: absolute;
bottom: 0; }
.single-team_member .team-member-header {
display: block;
align-items: stretch;
justify-content: center;
flex-direction: column;
flex-wrap: nowrap; }
.single-team_member .team-member-header .header-image {
padding: 0; }
.single-team_member .team-member-header .header-image:before {
content: '';
display: block;
padding-bottom: 56.75%; }
.single-team_member .team-member-header .header-content {
background-color: #1d1d1d;
padding: 30px 15px; } }