I wrote this piece of code but it's not working
#media (max-width: 767px){
.navbar-brand {
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
.navbar-brand p {
font-size: .6em;
margin-top: 12px;
}
.navbar-brand p img {
height: 20px ;
}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span{
font-size: 1em;
}
}
I want to change my navbar when the screen is smaller than 767px but it doesn't work at all.
use min-width instead of using max-width
#media (min-width: 767px) {
.navbar-brand {
padding-top: 10px;
height: 80px;
}
.navbar-brand h1{
padding-top: 10px;
font-size: 5vw;
}
.navbar-brand p {
font-size: .6em;
margin-top: 12px;
}
.navbar-brand p img {
height: 20px;
}
#collapsable-nav a {
font-size: 1.2em;
}
#collapsable-nav a span{
font-size: 1em;
}
}
Visit the following link to understand more about min-widht in css:
https://www.w3schools.com/cssref/playdemo.php?filename=playcss_min-width
You should probably use min-width for your media query in this case. Please read how to ask a proper question and update your question so we can better help you?
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
On my main Mac machine (firefox, safari and chrome) my code tags “box” renders normally:
But, on my Windows (chrome/firefox, with different screen res) it shows this empty horizontal scroll bar:
I want the scroll bar to only show up when needed, like on Mac. I'm using this Hugo theme (live demo). Here’s my slightly modded .css (stripped of all colors and unimportant parts):
/* General Page Layout */
body {
margin: 0;
line-height: 1.5;
font-size: 100%;
font-family: 'Source Code Pro', monospace;
}
.container {
max-width: 52em;
margin-left: auto;
margin-right: auto;
}
div.right {
float:right;
}
div.clearfix {
overflow: auto;
}
#media (max-width: 52em) {
.container {
width: 100%;
}
}
article.single section,
.article-list article {
padding-left: 4rem;
padding-right: 4rem;
padding-top: 1rem;
padding-bottom: 1rem;
}
#media (max-width: 52em) {
article.single section,
.article-list article {
padding-left: 2rem;
padding-right: 2rem;
}
}
header, footer {
padding-top: 1rem;
padding-bottom: 1rem;
}
header {
margin-top: 1rem;
margin-bottom: 2rem;
}
#media (max-width: 52em) {
header {
margin-top: 0;
padding-left: 2rem;
padding-right: 2rem;
}
}
footer {
margin-top: 2rem;
margin-bottom: 1rem;
text-align: center;
font-size: 0.9em;
}
#media (max-width: 52em) {
footer {
margin-top: 0;
margin-bottom: 0;
}
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-weight: bold;
line-height: 1.25;
margin-top: 1em;
margin-bottom: .5em;
}
p {
margin-top: 0;
margin-bottom: 1rem;
}
h1 { font-size: 2rem }
h2 { font-size: 1.5rem }
h3 { font-size: 1.25rem }
h4 { font-size: 1rem }
h5 { font-size: .875rem }
h6 { font-size: .75rem }
#font-face {
font-family: 'Input';
src: url('/font/Input-Regular.woff2') format('woff2'),
url('/font/Input-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
pre, code {
font-family: 'Input', monospace;
font-size: inherit;
}
/* Homepage Layout */
#media (max-width: 52em) {
.homepage {
margin-bottom: 2rem;
}
}
.homepage h1.site-title {
text-align: center;
font-size: 5em;
}
#media (max-width: 52em) {
.homepage h1.site-title {
font-size: 3em;
}
}
.homepage h1.headline {
font-size: 3em;
}
#media (max-width: 52em) {
.homepage h1.headline {
padding-left: 2rem;
padding-right: 2rem;
}
}
.homepage .hero-logo img {
width: 100%;
}
.homepage section.categories,
.homepage section.tags {
padding-left: 2rem;
padding-right: 2rem;
}
.homepage .tag {
margin-right: 2em;
}
/* Post List Layout */
.article-list h1.list-title {
font-size: 3em;
}
.article-list article {
padding-top: 4rem;
padding-bottom: 4rem;
margin-bottom: 4rem;
}
.article-list article h2.headline,
.article-list article h2.headline a {
margin-top: 0;
}
.article-list article .meta {
margin-bottom: 1rem;
}
/* Single Post Layout */
article.single .meta {
font-size: 0.9em;
text-align: right;
}
#media (max-width: 52em) {
article.single .meta {
padding-left: 2rem;
padding-right: 2rem;
}
}
article.single h1.headline {
margin-top: 0;
font-size: 3em;
}
#media (max-width: 52em) {
article.single h1.headline {
padding-left: 2rem;
padding-right: 2rem;
}
}
article.single section.body {
padding-top: 4rem;
padding-bottom: 3rem;
}
#media (max-width: 52em) {
article.single section.body {
padding-top: 2rem;
padding-bottom: 1rem;
}
}
/* Article Elements */
article.single * {
max-width: 100%;
}
article.single pre {
margin-top: 0;
margin-bottom: 1rem;
overflow-x: scroll;
border-radius: 3px;
padding: 2rem;
}
article.single ul code, ol code, p code {
padding: 0em 0.1em;
border-radius: 3px;
}
article.single figure, article.single div.highlight {
box-sizing: border-box;
max-width: 46rem;
width: 46rem;
margin-left: -1rem;
margin-right: 0rem;
margin-bottom: 1rem;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
padding-bottom: 0.1em;
}
#media (max-width: 52em) {
article.single figure, article.single div.highlight {
width: 100%;
margin-left: 0;
margin-right: 0;
border-radius: 3px;
}
}
You can try :
pre, code {
font-family: 'Input', monospace;
font-size: inherit;
overflow: auto;
}
Solved by changing overflow-x from scroll to auto in article.single pre.
For me, it happened when I set the direction attribute rtl in <body> tag,
although there's no overflow on default mode (ltr), however, I set the dir attribute for the main div tag under the body, like the following:
<body dir="rtl">
<div>
... <!-- few pixels horizontal overflow -->
</div>
</body>
so the worked solution for me was:
<body>
<div dir="rtl">
... <!-- No horizontal overflow -->
</div>
</body>
It could be resolved as followed.
Please set also for all viewport breakpoints the desired width: % of the .container class.
I created this website and i have a problem with the mobile site. Which it does not fit to the content. How do i need to fix this? i have attached the css of the responsive below.
I have tried several codes. But it does not fit to the content. The website is smaller than the device. And making the width 100% did not work.
Thanks in Advance
#media only screen and (max-width: 600px) {
.content-area {
float: center;
width: 100%;
}
.social-navigation li a::before,
.sidebar-toggle {
font-size: 16px;
}
.sidebar-toggle {
height: 46px;
}
.site-title {
font-size: 32px !important;
}
}
#media only screen and (max-width: 500px) {
.content-area {
padding: 0;
width: 100%;
}
.container {
width: 100%;
}
.site-logo {
width: 50px;
text-align: left;
}
.site-title,
.entry-title {
padding-top:20px;
font-size: 18px !important;
}
.site-description {
margin-top: 0;
font-size: 16px !important;
}
}
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 have a div with display:none (mobile first approach):
#my_div {
display: none;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
I use some media queries (after in the css) to display this div with some padding and font-size:
/* Between 600px and 649px */
#media (min-width: 600px) and (max-width: 649px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
/* Between 650px and 699px */
#media (min-width:650px) and (max-width:699px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}
/* Between 700px and 914px */
#media (min-width: 700px) and (max-width: 914px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
All works well until 699px. The third media query is not applied and the div isn't displayed.
If I use the following media queries, the div is displayed, but #media (min-width: 700px) is not applied. The #media (min-width:650px) is applied:
#media (min-width: 600px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
#media (min-width:650px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}
#media (min-width: 700px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
By using the chrome inspector I can see that over 700px it's applied the rule:
#my_div {
display: none;
...
}
EDIT
I have added one more media query
#my_div {
display: none;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#media (min-width: 600px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
#media (min-width:650px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}
#media (min-width: 768px) {
#my_div {
display: none; /* it doesn't work, also with !important */
}
}
#media (min-width: 915px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
The only rule that is not applied is #media (min-width: 768px).
In my CSS, there aren't other rules that affect the display of my_div div. I'm using Bootstrap 3.
EDIT 2
I added the Bootstrap hidden-sm class to the div my_div:
<div id="my_div" class="hidden-sm"><strong>My slogan</strong></div>
In this way the div isn't displayed between 768px and 991px, but I would to display it again from 915px.
SOLUTION
I updated the JSfiddle by AngelosCharalis and, by copying and paste my code, I found an invisible dot character. Now it works.
First you must start from the highest pixel.
#media (max-width: 914px) {
#myId {
}
}
#media (max-width: 699px) {
#myId {
}
}
#media (max-width: 649px) {
#myId {
}
}
#media (max-width: 599px) {
#myId {
}
}