My page is working properly on bigger screen size devices but on mobile devices it is not working properly. please help
https://codesandbox.io/s/ships-q64g6?file=/src/App.js
Try this CSS
* {
box-sizing: border-box
}
.App {
font-family: sans-serif;
text-align: center;
width: 100%;
height: 100%;
background-color: #00171f;
}
.App h4 {
font-size: 25.5px;
text-align: center;
color: whitesmoke;
}
.container {
display: flex;
flex-wrap: wrap;
flex-direction: column;
display: inline-block;
width: 100%;
}
.container ul {
width: 100%;
max-width: 800px;
padding: 10px;
}
.container li {
width: 100%;
list-style: none;
font-size: 20px;
font-weight: 1.5em;
}
.container img {
width: 100%;
height: 500px;
}
.container .name {
max-width: 660px;
width: 100%;
height: 20px;
text-align: left;
color: #57e1ed;
}
.container .port {
margin-top: -20px;
font-size: 20px;
text-align: right;
color: #57e1ed;
}
Related
Two issues-
I built a react sidebar, and for some reason whenever toggling it, the bar is behind the page's background image. I tried putting z-index: -1; on the background image, but then the image disappears (though the side bar finally shows again.) I have messed around with "position", with no success either. How can I get my sidebar to go over my background image?
The other issue is that whenever toggling the sidebar, it cover the navbar's title. Any suggestions on how to get my navbar's title to move to the side when the sidebar is being toggled?
enter image description here
enter image description here
.navbar {
align-items: center;
background-color: #060b26;
color: white;
display: flex;
height: 80px;
justify-content: start;
text-align: right;
}
.title {
margin-left: 20px;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
position: absolute;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
.nav-text a {
text-decoration: none;
color: #f5f5f5;
font-size: 18px;
width: 95%;
height: 100%;
display: flex;
align-items: center;
padding: 0 16px;
border-radius: 4px;
}
.nav-text a:hover {
background-color: #1a83ff;
}
.nav-menu-items {
width: 100%;
}
.navbar-toggle {
align-items: center;
background-color: #060b26;
display: flex;
height: 80px;
justify-content: start;
position: absolute;
width: 100%;
}
span {
margin-left: 16px;
}
.backgroundImage {
background-image: url('assets/dog.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
filter: blur(2px);
height: 100vh;
width: 100%;
}
.dashboardButton {
background: linear-gradient(
#fd585c,
#ec7278,
#ff5b69
);
border-radius: 8px;
color: #f5f5f5;
display: grid;
font-style: "Poppins", sans-serif;
height: 80px;
left: 43%;
letter-spacing: 3px;
margin: auto;
place-items: center;
position: absolute;
text-decoration: none;
top: 55%;
width: 200px;
}
.welcomeHeader {
color: #fd585c;
display: center;
font-size: 375%;
left: 25%;
position: absolute;
top: 35%
}
.welcomeDescription {
color: #f5f5f5;
font-size: 125%;
left: 20%;
position: absolute;
top: 47%;
}
I ended up putting:
backgroundImage {
z-index: 1;
}
nav-menu.active {
z-index: 2;
}
That solved the issue!
So i have this navbar and I just set my last element to have the margin-right: 0
but when media query runs, I see my navbar pop up and see the last item has margin-right: 0 applied as well and I dont want that. How can I fix this? I am not sure if I have to insert all the code here
.navbar {
font-size: 30px;
padding: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
height: auto;
background: rgb(255, 236, 65);
}
.list {
list-style-type: none;
}
.list-item {
display: inline-block;
margin-right: 40px;
}
.list-item:nth-child(4) {
margin-right: 0;
}
#media all and (max-width: 650px) {
.navbar {
flex-direction: column;
}
.list {
width: 100%;
text-align: center;
display: none;
}
.list-item {
display: block;
margin-top: 50px;
margin-bottom: 45px;
}
.menu {
display: block;
position: absolute;
top: 35px;
right: 42px;
}
.active {
display: block;
}
}
Try this
I Hope it will work 😊
.navbar {
font-size: 30px;
padding: 30px;
display: flex;
flex-direction: row;
justify-content: space-between;
height: auto;
background: rgb(255, 236, 65);
}
.list {
list-style-type: none;
}
.list-item {
display: inline-block;
margin-right: 40px;
}
.list-item:nth-child(4) {
margin-right: 0;
}
#media all and (max-width: 650px) {
.navbar {
flex-direction: column;
}
.list {
width: 100%;
text-align: center;
/* display: none; */
}
.list-item {
display: block;
margin-top: 50px;
margin-bottom: 45px;
}
.list-item:nth-child(4) {
margin-right: 40px;
}
.menu {
display: block;
position: absolute;
top: 35px;
right: 42px;
}
.active {
display: block;
}
}
This question already has answers here:
What are the various ways to hide a <div>?
(5 answers)
Can I have an onclick effect in CSS?
(14 answers)
Closed 2 years ago.
I have an a element that acts like a toggle button :
var container = document.getElementsByClassName("favorite");
for (var i = 0; i < container.length; i++) {
//For each element in the container array, add an onclick event.
container[i].onclick = function(event) {
this.classList.toggle('selected');
}
}
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
.container .favorite {
position: absolute;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
display: flex;
border-radius: 50%;
cursor: pointer;
}
.container .favorite:hover {
background: #D9DEEA;
}
.container .favorite::after {
z-index: 2;
position: relative;
margin: auto;
height: 20px;
content: url("https://img.icons8.com/ios/16/000000/star.png");
}
.container .favorite.selected::after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<a class="favorite"></a>
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
I want to transform it to a checkbox, but the solutions I find are for a checkbox with a label, I only want to use the checkbox in my html without the label or some additional div, this is what I tried :
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
input[type="checkbox"]{
height: 20px;
width: 20px;
position: absolute;
opacity: 1;
margin: auto;
height: 20px;
cursor: pointer;
top: 10px;
right: 10px;
}
input[type="checkbox"]::after{
content: url("https://img.icons8.com/ios/16/000000/star.png");
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin: auto;
height: 20px;
width: 20px;
pointer-events: none;
}
input[type="checkbox"]:checked:after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
input[type="checkbox"]:hover:after{
background: #D9DEEA;
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<input type="checkbox" />
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
Which doesn't look good.
How can I fix this ? and thanks in advance.
You can add appearance:none to remove to checkbox appearance and set fixed height/width to checkbox and :after, changing :after to flex allows you to center the background.
body {
background-color: #04246A;
}
.container {
position: relative;
width: 204px;
max-width: 204px;
height: 82px;
max-height: 82px;
padding: 24px;
background: #fff;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
color: black;
list-style: none;
border: 2px solid black;
}
input[type="checkbox"]{
height: 40px;
width: 40px;
position: absolute;
opacity: 1;
margin: auto;
cursor: pointer;
top: 10px;
right: 10px;
appearance: none;
outline: none;
}
input[type="checkbox"]::after{
content: url("https://img.icons8.com/ios/16/000000/star.png");
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
margin: auto;
height: 40px;
width: 40px;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
input[type="checkbox"]:checked:after {
content: url("https://img.icons8.com/ios-filled/16/000000/star.png");
}
input[type="checkbox"]:hover:after{
background: #D9DEEA;
}
.container dl {
margin: 0;
}
.container dl dt {
display: block;
font-size: 12px;
color: #6B7790;
}
.container dl dd {
margin: 0;
font-weight: normal;
color: #04246A;
}
<div class="container">
<input type="checkbox" />
<dl>
<dt>Ref</dt>
<dd>XXX123</dd>
</dl>
</div>
According to the validator the errors are at line 136 and line 196.
I have tried to remove and change the font-size, because vW isn't a valid font-size, but that didn't change anything.
I hope you can figure out what's wrong with my code.
#media only screen and (min-width: 376px) {
.navbar {
float: right;
overflow: hidden;
background-color: #BA6815;
position: static;
top: 0;
width: 51%;
height: 50%;
}
.tabletfoto img {
display: inline;
float: right;
width: 51%;
}
.titel {
text-align: center;
font-size: 4.5vw;
color: #001111;
}
.titelnavbar {
text-align: center;
color: #001111;
font-size: 5.5vw;
}
.normaletekst {
text-align: left;
color: #000000;
font-size: 3vw;
}
}
#media only screen and (min-width: 1025px) {
.tabletfoto img {
display: none;
}
.navbar {
overflow: hidden;
background-color: #BA6815;
position: fixed;
top: 0;
max-width: 14%;
height: 100%;
}
.navbar a {
float: left;
display: block;
color: #FFFFFF;
text-align: center;
padding: 15% 13%;
text-decoration: none;
font-size: 1.5vw;
}
.navbar a:hover {
color: #AA0000;
font-size: 2vw;
}
.titel {
text-align: center;
color: #2E2A27;
font-size: 2.5vw;
width: 100%;
}
.titelnavbar {
text-align: center;
color: #2E2A27;
font-size: 2.5vw;
}
.normaletekst {
text-align: left;
color: #000000;
margin-left: 15%;
font-size: 2vw;
}
}
Underneath here the error I keep getting:
vw is valid as a font-size but the validator isn't up to date.
Note the CSS version it's using is 2.1 which is very old.
If it works, ignore it - unless you are trying to support browsers which do not support anything after 2.1. In that case, use a fallback font-size.
Hi guys I am having a problem with my responsive CSS. It is working fine with max-width:321px but not when I try to do max-width:500px. I am trying to understand why and what I am doing wrong. Please help...
/*/Mobile MAINCSS/*/
img {
max-width: 100%;
height: auto;
}
#media screen and (max-width: 320px) {
/*/Nav and Header/*/
iframe {
width: 100%;
height: 700px;
}
body {
color: red;
}
#nav {
display: none;
width: 100%;
}
#logomain {
width: 100%;
height: auto;
display: none;
}
.logo {
display: none;
}
.logoright {
display: none;
}
.mobile-number {
display: block;
text-align: center;
background:#333399;
}
.mobile-number a:link {
color: red;
text-decoration: none;
}
.mobile-number a:visited {
color: red;
text-decoration: none;
}
#head_wrap {
width: 100%;
height: auto;
}
#head {
width: 100%;
height: auto;
}
/*/Mobile Navigation/*/
#mobilenav {
display: block;
margin: 0 auto;
width: 100%;
height: auto;
background: #333399;
color: white;
font-size: 18px;
text-align: center;
}
.mobile ul {
display: inline;
margin: 0 auto;
width: 100%;
height: auto;
}
.mobile ul li {
display: inline-block;
padding: 10px;
}
.mobile a:link {
color: white;
text-decoration: none;
font-weight: bold;
text-shadow: 1px 1px 1px black;
border-radius: 5px 5px 5px 5px;
padding: 5px;
}
.mobile a:visited {
color: white;
}
}
/*/Content/*/
#content {
width: 100%;
height: auto;
}
#content_wrapper {
width: 100%;
height: auto;
}
#bizmain {
width: 100%;
height: auto;
}
.bizexpress {
float: none;
}
.bizpro {
float: none;
}
.pro {
float: none;
}
/*/Footer/*/
#footer {
width: 100%;
height: auto;
}
/*/Additional Updates 02/28/2015/*/
.main-right {
width: 100%;
height: auto;
text-align: center;
}
.main-left {
width: 100%;
height: auto;
float: none;
text-align: center;
}
.form {
width: 100%;
height: auto;
}
.form-control {
width: 50%;
}
.input-group-addon {
font-size: inherit;
}
/*/Website Design/*/
.evoke {
width: 100%;
height: auto;
}
.evokeemotions {
width: 100%;
height: auto;
}
.resource1 {
float: none;
text-align: center;
}
.resource2 {
float: none;
text-align: center;
}
.resource3 {
float: none;
text-align: center;
}
}
#media screen and (max-width: 500px)
{
}
#media screen and (max-width: 320px)
{
}
You are right no problem please. place 500px Css above 300px