I am working on a responsive layout locally. I am testing with firefox responsive layout tool. For some reason Firefox is not applying the media query for 320px. I tried this solution Browser not recognizing max-device-width but it didn't work.
Any idea?
My code
#media only screen and (max-width: 320px) {
.btn-default {
display: inline-block !important;
}
.slide figure figcaption {
right: 21%;
width: 67%;
}
aside {
width: 64%;
margin-top: 0%;
margin-right: 30%;
}
.footerFloat {
width: 25%;
float: left;
min-width: 200px;
margin-left: 118px;
}
.textul {
text-align: left;
}
h1 {
font-size: 20px;
text-align:left;
margin: -36px 0px 16px;
}
}
When I debug my code with inspect element at 320px resolution it doesn't read the above code. Intsead goes to:
#media only screen and (max-width : 800px) {
.btn-default {
display: inline-block !important;
}
aside {
width: 64%;
margin-top: 0%;
margin-right: 30%;
}
header {
background-position: center;
background-image: url('Images/logo_mobile.png') ;
}
h1 {
font-size: 20px;
text-align:center;
margin: -136px 0px 16px;
}
.textul {
text-align: left;
}
}
Related
I found the React CSS modules usefull, but having problem when I tried to reuse the same component with a little modified css I stuck. For example I created Neon glowing button, but now need to change only the width of the Button and some additional small changes in the css.
The only option I see is component without css and for every different case need to rewrite the whole css. Is there a smarter way?
import React from "react";
import styles from "./index.module.css";
import { Link } from "react-router-dom";
const GlowingButton = ({ title, path }) => {
return (
<div className={styles.buttonWrapper}>
<Link className={styles.button} to={path}>
<button className={styles["glow-on-hover"]}>{title}</button>
</Link>
</div>
);
};
export default GlowingButton;
And here is index.module.css
.buttonWrapper {
margin: 0px;
padding: 0px;
display: flex;
justify-content: center;
align-items: center;
background: transparent;
font-family: "consolas";
}
.button {
margin: 0;
padding: 0;
width: 80%;
height: 8vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: #100f;
text-decoration: none;
}
.glow-on-hover {
width: 400px;
height: 50px;
border: none;
outline: none;
color: #fff;
background: #111;
cursor: pointer;
position: relative;
z-index: 0;
border-radius: 10px;
}
.glow-on-hover:before {
content: "";
background: linear-gradient(
45deg,
#ff0000,
#ff7300,
#fffb00,
#48ff00,
#00ffd5,
#002bff,
#7a00ff,
#ff00c8,
#ff0000
);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(5px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity 0.3s ease-in-out;
border-radius: 10px;
}
.glow-on-hover:active {
color: #000;
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover:after {
z-index: -1;
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #111;
left: 0;
top: 0;
border-radius: 10px;
}
#keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
I am trying to make my grid layout divs to be the same height. Please see my sass code below, screenshots of website layout and html code. I want the common height to be the height of the grid element with the most content.
I am only able to provide a picture of my html, since I am using react and different elements.
Please advise on SASS settings. thanks!
SASS code:
// MAIN CONTENT
.grid {
display: grid;
width: 114rem;
grid-gap: 0.5rem;
margin:1rem;
grid-template-columns: repeat(
auto-fit,
minmax(20rem, 1fr)
);
align-items: start;
#include media(small) {
grid-gap: 3rem;
}
&__item {
background: $mainWhite;
border-radius: 0.05rem;
overflow: hidden;
box-shadow: 0 3rem 6rem rgba(0, 0, 0, .05);
transition: $transition;
margin-bottom: 2rem;
&:hover {
transform: translateY(-.5%);
box-shadow: 0 4rem 8rem rgba(0, 0, 0, .1);
}
}
}
.card {
.card__img {
display: block;
width: 100%;
height: 18rem;
object-fit: cover;
object-position: top;
}
.card__content {
padding: 2rem 2rem;
a{
margin-bottom: 1%;
&:hover{
text-decoration: none;
}
}
.card__tools__header{
font-weight: 400;
margin-bottom: 0.2rem;
font-size: 1.2rem;
color:$mainBlack;
}
.card__tools__box{
display:flex;
flex-wrap: wrap;
flex-direction: row;
box-sizing: border-box;
.card__tools {
font-size: 1.5rem;
white-space: nowrap;
color:$mainGreen;
padding-right:1rem;
overflow: hidden;
box-sizing: border-box;
}
}
.card__header {
font-family: 'Open Sans', sans-serif;
font-size: 1.8rem;
font-weight: 500;
color: $mainBlack;
margin-bottom: 1rem;
}
.card__text {
font-size: 1.1rem;
letter-spacing: .1rem;
margin-bottom: 1rem;
}
}
.card__btn {
display: block;
width: 100%;
padding: 1rem;
font-size: 1.2rem;
text-align: center;
color: $mainBlack;
background-color: $mainWhite;
border: none;
border-radius: 0;
transition: $transition;
cursor: pointer;
margin-top: 5%;
span {
margin-left: 1rem;
}
&:hover,
&:active {
background: $mainGreen;
text-decoration: none;
color:$mainWhite;
span {
margin-left: 1.5rem;
}
}
}
}
You need to set the height with grid-template-rows on your container and tell the children to fill 100% of that height. Otherwise they will only take the space they need:
.grid {
//...
grid-template-rows: 1fr;
&__item {
//...
height: 100%;
}
}
I created a codepen for you to test this.
My object is to modify css class value dynamically using angular js
My html
<body class="loader progress-bar">
</body>
Css class :
body {
margin: 0 auto;
font-family: 'Source Sans Pro', sans-serif;
color: #4a4a4a;
letter-spacing: 1px;
background: url('#{$imgPath}vsn-bg.png') #f5f5f5 no-repeat 50% 0;
#media only screen and (max-width: 1024px) { background-position-y: -20px; }
&.loader {
> div {
width: 40px;
height: 36px;
background: url('#{$imgPath}/v-360-contact-color#2x.png') center 100%;
position: absolute;
top: 50%;
left: 50%;
margin: -20px 0 0 -18px;
z-index: 9999999;
}
#{$project}_cc {
display: none;
}
}
&.progress-bar {
&::before {
content: '';
display: block;
width: 20%;
height: 4px;
background: rgba(245, 245, 245, 0.9);
transition: width ease .3s;
}
}
}
the target is to modify the value of progress-bar width for example from 20% to 30% dynamically
How can I create Tabs with Angular-Material look like this picture below :
(I don't know how to describe it in English so I call it is "merges tab" )
Here's a stab at it - CodePen. I think it can be improved.
Markup
Some description
Tab One
Tab Two
Tab Three
Tab Four
CSS
#myTabs {
margin-top: -40px;
z-index: 0;
}
#myTabs md-tab-item {
border: 1px solid black;
}
#myTabs md-tabs-canvas,
#myTabs md-pagination-wrapper {
height: 100px
}
#myTabs .md-tab {
line-height: 80px
}
#tabsDescription {
height: 40px;
z-index: 1;
text-align: center;
}
#tabsDescription {
margin-left: -20px;
background: white;
height: 40px;
width: 4px;
text-align: center;
}
#tabsDescription p {
margin: 5px -60px;
white-space: nowrap;
}
I am starting to code for a mobile device (iPhone 5c) and then in my media query sections, I am putting more code that applies to larger sizes: Tablet (768px), Desktop (1024px) and a larger Desktop (1200px).
While I am coding for the mobile section, I am shrinking the width of my window on my own desktop (using google chrome) to the furthest it can be while I am coding. However, when I look at my phone and iOS Simulator with my URL plugged in, it appears as the Tablet version instead. It should not have the background color as "red" on the mobile, ONLY on the Tablet.
Basically: Mobile - not red. Tablet - red
When I plug it in my phone, it comes up red when it is not supposed to be. It looks like the Tablet version.
If anyone could help me I would really appreciate it!
Here is my URL: alyssamroth.com/responsive01.html
And this is my code so far:
html {
background-color: #e9e9e9;
}
body {
font-family: "aktiv-grotesk-std",sans-serif;
margin: 0 auto;
width: 100%;
}
#wrapper {
margin: 0 auto;
overflow: hidden;
}
/*=================== HEADER======================== */
nav {
height: 100px;
background-color: #e54f26;
/*padding: 0 0px 0 0px;*/
}
nav #logo {
margin-left: 20px;
margin-top: 20px;
}
nav #contactIcon {
margin-right: 20px;
margin-top: 35px;
float: right;
}
header #mountains {
width: 100%;
height: 350px;
background-image: url(../img/mountain.jpg);
background-repeat: no-repeat;
background-size: cover;
margin-bottom: 40px;
margin-top: 0px
}
header h1 {
color: white;
font-size: 2.7em;
margin-left: 55px;
padding-top: 150px;
font-family: "aktiv-grotesk-std", sans-serif;
font-weight: 900;
font-style: normal;
}
header h2 {
padding-top: 2px;
letter-spacing: 15px;
color: #a7a8ad;
font-size: 2.1em;
margin-left: 100px;
font-family: "aktiv-grotesk-std", sans-serif;
font-weight: 300;
font-style: normal;
padding-bottom: 200px;
}
/* ========== CONTENT ============= */
article h3 {
font-size: 1.8em;
color: #101626;
margin-left: 20px;
margin-bottom: 20px;
font-family: "aktiv-grotesk-std", sans-serif;
font-weight: 200;
font-style: normal;
}
p {
margin-left: 20px;
font-size: 1.2em;
margin-right: 20px;
color: #101626;
line-height: 30px;
font-family: "aktiv-grotesk-std", sans-serif;
font-weight: 400;
font-style: normal;
padding-bottom: 20px
}
aside #ipad {
padding-top: 76px;
}
aside #desktop {
padding-top: 82px;
}
aside #phone {
padding-top: 82px;
}
/* =============== Media Query for Tablets ===============*/
#media only screen and (min-width: 768px) {
body {
background-color: red
}
/* =============== Media Query for Desktops ===============*/
#media only screen and (min-width: 1024px) {
}
/* =============== Media Query for Large Desktops ===============*/
#media only screen and (min-width: 1200px) {
That's what I am seeing, see my scree shots:
Mobile - NOT red
Tablet - IS red