I want to create div in html with images and texx, but It should appears only on mobile version, how i can make this ?
Here is some code.
/*-- Mobile Design---- */
#media (min-width: 320px) and (max-width: 767px) {
/* put your css styles in here */
html,
body {
margin-top: 0;
margin-bottom: 0;
}
a.navbar-brand img {
padding: 0;
display: flex;
margin-left: 10px;
margin-right: auto;
width: 95%;
max-width: 200px;
}
.header {
height: 15%;
}
.navbar-toggler i {
font-size: 22px;
margin-right: 10px;
}
Hide the element by default and only show it when it fits your contraints. For example:
.yourElement {
display: none;
}
#media (min-width: 320px) and (max-width: 767px) {
.yourElement {
display: block;
}
}
Related
I would like to have 2 different margin for the same div depend on mobile and desktop view.
The code below can perform a margin-left: 70px; on desktop.
The problem arises on mobile view, it doesn't reset to margin-left: 0px;
How can I do it ?
Thanks.
.body-container {
padding-left: 0px;
padding-right: 0px;
max-width:1350px;
}
.content {
margin-left: 70px;
}
.content-collapsed {
margin-left: 0px;
}
You're not resetting margin in .content
You need to use media queries
The solution below uses non-mobile approach
body {
margin: 0;
}
.content {
background: red;
margin-left: 70px;
}
#media (max-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 0;
}
}
<div class="content">content</div>
The solution below uses mobile approach (recommended, also is the same used by bootstrap 4)
body {
margin: 0;
}
.content {
background: red;
margin-left: 0;
}
#media (min-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 70px;
}
}
<div class="content">content</div>
You can use media queries (MDN).
Example :
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
border: 1px solid black;
margin-left: 0px; /* mobile*/
}
/* screen width higher than 750px */
#media screen and (min-width: 750px) {
div {
margin-left: 70px;
}
}
<div></div>
Use media query. Add:
/* For mobile*/
#media only screen and (max-width: 768px) {
div {
margin-left: 0;
}
}
This is the solution that worked the best for my case:
<style>
.body-container {
padding-left: 0px;
padding-right: 0px;
max-width:1350px;
}
.content {
margin-left: 70px;
}
##media (max-width: 800px) { /*choose the width you prefer*/
.content {
margin-left: 0px;
min-width: 100%;
}
}
</style>
Thank you. You made my day.
So I was at work making a page and i put my #media rules in a responsive.css file. So it worked all fine, until i uploaded to server and the responsive.css is still being called but none of its rules are working. i also found this to be the case at home as well. Any ideas why this might be?
below is my links i used.
and the responsive.css file.
again this works at work but not anywhere else, the styles .css works fine so does my jquery scripts.
Thanks in advance
(unable to show full code for CopyR reasons)
mobilenav {
display: none;
font-size: 450%;
position: fixed;
right: 0;
top: 0;
height: 1em;
z-index: 10;
justify-content: center;
align-items: center;
align-content: center;
width: 20%;
background-color: var(--katlgreen);
}
mobilenav h1 {
background-color: transparent;
}
navmenu {
position: fixed;
top: 0;
width: 100%;
height: 100%;
display: flex;
flex-flow: column;
background-color: var(--katdgreen);
z-index: 9;
}
navmenu a {
margin-left: 2em;
font-size: 150%;
margin-top: 3em;
font-weight: 900;
}
/* columns and removes */
#media only screen and (max-width: 1200px) {
td {
font-size: 90%;
}
}
#media only screen and (max-width: 950px) {
column {
width: 48%;
margin-top: 1em;
}
}
#media only screen and (max-width: 450px) {
column {
width: 98%;
margin-top: 1em;
}
#estlogo {
display: none;
}
brandbuttons {
display: none;
}
nav {
display: none;
}
tab {
display: none;
}
header {
background-color: var(--katlgreen);
margin-bottom: 1em;
height: 5em;
align-content: center;
}
mobilenav {
display: flex;
}
#katlogo {
margin: auto 5%;
}
}
/* columns and removes */
#media only screen and (min-width: 951px) and (max-width: 1200px) {
nav {
width: 50%;
}
tabline {
width: 55%;
}
}
#media only screen and (min-width: 750px) and (max-width: 950px) {
.brandbutton2 {
width: 40%;
margin: 0;
}
.brandbuttons2 {
justify-content: space-around;
width: 100%;
}
#katlogo {
width: 120px;
}
#estlogo {
width: 80px;
}
nav {
width: 50%;
}
tabline {
width: 55%;
}
}
#media only screen and (min-width: 360px) and (max-width: 749px) {
* {
font-size: 98%;
}
.brandbutton2 {
width: 40%;
margin: 0;
}
.brandbuttons2 {
justify-content: space-around;
width: 100%;
}
nav {
width: 80%;
}
tabline {
width: 85%;
}
#katlogo {
width: 120px;
}
#estlogo {
width: 80px;
}
}
#media only screen and (min-width: 250px) and (max-width: 359px) {
* {
font-size: 98%;
}
#katlogo {
width: 100px;
}
}
#media only screen and (max-width: 250px) {
* {
font-size: 96%;
}
#katlogo {
width: 80px;
}
}
/* mobile change hdr tab to menu complete
/* vs device delete second logo and remove 2 buttons. complete
<link href="styles.css" rel="stylesheet" type="text/css">
<link href="functions.css" rel="stylesheet" type="text/css">
<link href="responsive.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
perhaps use min-width instead of max-width
Best method i found to fix this soulution is adding the following meta code for mobile responsiveness.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If I set the browser width to 1024px the following bootstrap container rule is being applied:
#media (min-width: 768px) {
.container {
width: 750px;
}
}
If I extend the browser width to 1092px then the following bootstrap container rule is being applied:
#media (min-width: 992px) {
.container {
width: 970px;
}
}
There are no other CSS rules applied to the container, just the standard bootstrap rules:
.container {
margin-right: auto;
margin-left: auto;
padding-left: 15px;
padding-right: 15px;
}
Can anyone explain to me why a browser width of 1024px isn't getting the min-width: 992px rules applied to it?
I think you forget open close bracket { }
#media (min-width: 768px) {
.container {
width: 750px;
background: yellow;
}
}
#media (min-width: 992px) {
.container {
width: 970px;
background: red;
}
}
I have add css and media queries for width of screens thats ranging from 320 to a max width above 1440 , When i take the webpage using chromes inspect everything shows fine , but when i resize the browser the page layouts breaks apart for the same size , for example if i resize the browser to 992 x 442 as browser resize , the layout breaks , but if i use the same resolution while inspecting in chrome the page layout is prefect.
What is happening over here ? and can i fix this issue?
#media only screen
and (min-device-width: 769px)
and (max-device-width: 991px) {
.fix-feedback{height: 80px;}
.col-f-lt {
width: 14% !important;
height: 80px;
}
.col-f-lt p{line-height: 53px;}
.col-f-rt {
width: 83% !important;
}
.btn-send-fb {
margin-top: 1px;
display: inline-block;
}
}
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1199px) {
.navbar-nav>li {
display: inline-block;
float: inherit;
}
.navbar-nav {
text-align: center;
float: none;
margin: 6px auto;
}
}
#media (width: 768px){
.col-f-lt{ width: 16%; float: left; background: #13929e; padding: 33px 20px; margin-right: 10px; }
.col-f-rt { margin: 2px 0 0; width: 80%; float: left; padding: 10px 0 15px; }
.sav-btnn{ display: inline-block; width: 100%;}
.sav-btnn a{ display: table; margin: 0 auto; float: inherit !important; margin-bottom: 10px;}
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.btn-send-fb {
margin-top: 1px;
display: inline-block;
}
}
First off, min-device-width and max-device-width is deprecated, use min-width and max-width.
The problem here is that your first query start at 769px and ends at 991px, then your second start at 768px, even before the first one started, so when the screen is between 769px and 991px both will be applied.
If they are to be applied one after the other, change the seconds min-width to 992px
Based on a comment, change the 3rd to #media only screen and (min-width: 480px) and (max-width: 768px){.
Note, when both min-width/max-width are used like this, it won't matter their position in the CSS, though it is recommended to order them from low to high, to make it easier to follow what happens to who and when.
#media only screen
and (min-width: 769px)
and (max-width: 991px) {
.fix-feedback{height: 80px;}
.col-f-lt {
width: 14% !important;
height: 80px;
}
.col-f-lt p{line-height: 53px;}
.col-f-rt {
width: 83% !important;
}
.btn-send-fb {
margin-top: 1px;
display: inline-block;
}
}
#media only screen
and (min-width: 992px)
and (max-width: 1199px) {
.navbar-nav>li {
display: inline-block;
float: inherit;
}
.navbar-nav {
text-align: center;
float: none;
margin: 6px auto;
}
}
#media only screen
and (min-width: 480px)
and (max-width: 768px){
.col-f-lt{ width: 16%; float: left; background: #13929e; padding: 33px 20px; margin-right: 10px; }
.col-f-rt { margin: 2px 0 0; width: 80%; float: left; padding: 10px 0 15px; }
.sav-btnn{ display: inline-block; width: 100%;}
.sav-btnn a{ display: table; margin: 0 auto; float: inherit !important; margin-bottom: 10px;}
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.btn-send-fb {
margin-top: 1px;
display: inline-block;
}
}
So I want the divider line on the picture to decrease or increase in size based on the All publications link. Currently I have done it like this, but I'm wondering if there's a better solution for this?
#media (max-width: 767px) {
.dividing .col-xs-6 {
width:75%;
}
}
#media (max-width: 600px) {
.dividing .col-xs-6 {
width:65%;
}
}
#media (max-width: 423px) {
.dividing .col-xs-6 {
width:55%;
}
}
You could use a :before element:
h2{
margin: auto;
margin-top: 2em;
text-align: right;
display: flex;
align-items: center;
color: #34495e;
padding-bottom: 1em;
}
h2:before{
content: '';
flex: 1 0 0;
margin-right: 0.25em;
height: 2px;
background: #34495e;
}
<h2>Test</h2>