I am creating a calendar layout using flexbox. I am getting an extra gap before my first box:
Below is my code. Could anyone suggest what is creating this additional gap and how I can remove it?
Thank you in advance.
html {
font-size: 62, 5%;
box-sizing: border-box;
}
*,::before, ::after {
box-sizing: inherit;
}
body {
font-size: 1.6rem;
padding: 0;
margin: 0;
display: flex;
flex-direction:column;
}
header.header-news {
& > button {
position: absolute;
top: 0;
height: 100%;
opacity: .5;
&.last {
right: 0;
}
}
& > div.header-news_container {
display: flex;
}
& > div {
flex: 1 0 0;
}
min-height: 18rem;
position: relative;
}
section.main-content {
padding-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
padding-left: 1rem;
}
.main-content__day {
aspect-ratio: 1/1;
width: calc(100% /7 - 1rem);
display:flex;
border: 1px solid rgba(0, 0, 0, .3);
align-items: center;
border-radius: .5rem;
justify-content: center;
cursor: pointer;
transition: .5s;
}
Related
[W O R K I N G ]
Here is how it looks on my desktop (https://imgur.com/A5TpUu2)
My friend's phone which isn't an iphone (https://imgur.com/V0Khmjq)
Iphone 11 according to browser (https://i.imgur.com/MjZyxih.png)
[N O T - W O R K I NG]
A screenshot from an iphone 11 (https://imgur.com/YV5qHuV)
A screenshot from an iphone 12 (https://imgur.com/ltZo7xQ)
[SASS FOR NAVIGATION]
.navigationBar_ul--desktop{
display: none;
}
.navigationBar{
background-color: white;
height: fit-content;
display: flex;
justify-content: flex-end;
position:sticky;
top: 0;
overflow: hidden;
z-index: 5;
}
.navigationBar.active {
background-color: #F5F5F5;
}
.app_navbar-menu {
width: fit-content;
height: fit-content;
.app_navbar-menu_icon{
color: rgba(0, 0, 0, 0.799);
height: clamp(2rem, 4rem, 6rem);
margin-right: 1rem;
}
div {
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 50;
padding: 1rem;
width: 80%;
height: 100vh;
display: flex;
justify-content: flex-end;
align-items: flex-end;
flex-direction: column;
box-shadow: 0 0 50px rgba(7, 7, 7, 0.5);
background: white;
overflow: hidden;
-webkit-backface-visibility: hidden;
svg {
width: 15%;
height: auto;
color: rgba(252,98,77);
}
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
display: flex;
gap: 10%;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
li {
height: fit-content;
cursor: pointer;
a{
text-decoration: none;
font-size: 2rem;
font-weight: 500;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
color: black;
transition: all .3s ease-in-out;
}
}
}
}
}
}
[SASS FOR HOME BACKGROUND]
padding-top: 4rem;
padding-bottom: 4rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: linear-gradient( rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0) ), url('./homeImage.png');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size : cover;```
I think there could be different solutions. One would be to declare the whole header as a flexbox and set the button to the right side with margin-left: auto;. You also could just care about the CSS for an iPhone with specific CSS rules, for example:
#supports (-webkit-touch-callout: none) {
/* CSS specific to iOS devices */
}
#supports not (-webkit-touch-callout: none) {
/* CSS for other than iOS devices */
}
So, I have a roundish card that my client don't want to get rid off, but the dynamic text will always be larger than the card itself. I have to limit the characters at first and then show the full text on hover and he want's me to zoom in the card so it can be larger to fit the text. How do I do that? I've been trying scale and width with ch, but on hover I cannot change the width since it only zooms in.
I'm using Angular 9, Typescript and Scss.
.model-list {
display: flex;
width: 65rem;
height: 55vh;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
overflow-y: scroll;
scrollbar-width: none;
.model-card {
display: flex;
flex-direction: row;
align-items: center;
margin: 10px 20px;
padding: 10px;
width: 16rem;
height: 5rem;
border-radius: 50px;
-webkit-box-shadow: 0px 1px 20px -4px rgba(0, 0, 0, 0.27);
box-shadow: 0px 1px 20px -4px rgba(0, 0, 0, 0.27);
cursor: pointer;
.text {
width: 13rem;
display: flex;
flex-direction: column;
padding: 16px;
.name {
font-size: 15px;
font-weight: bold;
color: #626c75;
margin: 0px;
width: 100%;
}
.description {
display: flex;
flex-direction: row;
font-size: 14px;
color: #dce1e7;
margin: 0px;
width: 17ch;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.icon-container {
width: 5rem;
height: 5rem;
img {
width: 100%;
height: 100%;
}
}
&:hover,
&.active {
transform: scale(1.2);
.name,
.description {
width: 60ch;
color: white;
}
}
}
}
I know there have been several posts about images not showing up in GitHub Pages, but the solutions don't seem to fix my problem. On my local machine and on Netlify the page works correctly, but on GitHub Pages I'm missing all my images.
All the images give this error:
Failed to load resource: the server responded with a status of 404 ()
This is the link to the Github Page: https://mfagaikema.github.io/BarbershopWebsite/
This is the link to my repo: https://github.com/MFAGaikema/BarbershopWebsite/
What am I missing?
Here is your code and make appropriate changes;
<link rel="stylesheet" href="src/css/style.css">
gives https://mfagaikema.github.io**/BarbershopWebsite/**src/css/style.css
Now css code as following;
linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/images/3day-shave-course.jpg)
gives
https://mfagaikema.github.io/images/3day-shave-course.jpg
/BarbershopWebsite/ is missing which is causing the problem
Now add site folder name in css url rule
/BarbershopWebsite/images/3day-shave-course.jpg
console view - I made quick dash in my local console to see what was causing it and this worked as suggested above.
it would work.
UPDATE - Since I am not able to get to github with out creating unnecessary fork here is what you need to change in src/css/style.css file. Just copy paste below code.
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: "Manrope", sans-serif;
}
html,
body {
overflow-x: hidden;
}
/*scrollbar*/
/* width */
::-webkit-scrollbar {
width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #999;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/*Navigatiemenu top*/
header {
position: relative;
}
header nav {
width: 100vw;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: fixed;
z-index: 2;
background-color: rgba(38, 60, 73, 0.9);
}
header ul {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-left: 100px;
}
header ul li {
list-style-type: none;
padding: 0 50px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
font-size: 16px;
}
header ul li a {
text-decoration: none;
color: white;
}
header ul li a:hover {
color: chocolate;
}
header ul li #appointment {
padding: 15px 30px;
background-color: saddlebrown;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
header ul li #appointment:hover {
background-color: chocolate;
color: black;
}
header #logo {
font-size: 50px;
text-decoration: none;
padding: 0px 20px;
margin: 5px;
border: 2px solid white;
color: white;
background-color: #263c49;
font-family: "Economica", sans-serif;
}
/*intro*/
.intro {
background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), url(../../images/3day-shave-course.jpg);
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../../images/3day-shave-course.jpg);
background-size: cover;
height: 800px;
text-align: center;
color: white;
text-shadow: 2px 0 0 black, -2px 0 0 black, 0 2px 0 black, 0 -2px 0 black, 1px 1px black, -1px -1px 0 black,
1px -1px 0 black, -1px 1px 0 black;
letter-spacing: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.intro .company-name {
padding: 0 20px;
margin: auto;
border: 5px solid #fff;
-webkit-animation: fade-names 1s linear forwards;
animation: fade-names 1s linear forwards;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.intro h1 {
font-size: 150px;
}
.intro h2 {
margin-top: -20px;
padding-bottom: 20px;
font-size: 50px;
}
.intro h1,
.intro h2 {
font-family: "Economica", sans-serif;
font-weight: 100;
}
#-webkit-keyframes fade-names {
from {
opacity: 0;
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
#keyframes fade-names {
from {
opacity: 0;
-webkit-transform: scale(0.95);
transform: scale(0.95);
}
to {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
/*markup content*/
.content {
margin: 0 300px;
}
.content > div {
padding: 80px 0 10px 0;
}
.content > div > p {
margin-bottom: 20px;
}
.content h2 {
color: #444;
position: relative;
margin-bottom: 20px;
}
.content h2::after {
content: "";
width: 70px;
position: absolute;
left: 0;
bottom: -2px;
border-bottom: #aaa8a8 solid 2px;
}
/*make appointment*/
.make-appointment .shops {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.make-appointment .shops .shop-text {
margin: 5px 0;
}
.make-appointment .shops .emmen-container,
.make-appointment .shops .zwolle-container {
width: 450px;
}
.make-appointment .shops .store-hours {
padding-top: 10px;
}
.make-appointment .shops .hours {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.make-appointment .shops .emmen-btn::after {
background-image: url(../../images/emmen-front.jpg);
}
.make-appointment .shops .zwolle-btn:after {
background-image: url(../../images/Stellar-Bakkes-13.jpg);
}
.make-appointment .shops .emmen-btn,
.make-appointment .shops .zwolle-btn {
height: 310px;
background: #000;
position: relative;
}
.make-appointment .shops .emmen-btn h3,
.make-appointment .shops .zwolle-btn h3 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 1;
color: #fff;
padding: 10px 20px;
background-color: chocolate;
font-weight: 200;
}
.make-appointment .shops .emmen-btn h3:hover,
.make-appointment .shops .zwolle-btn h3:hover {
text-decoration: underline;
}
.make-appointment .shops .emmen-btn::after,
.make-appointment .shops .zwolle-btn::after {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
content: "";
background-size: cover;
background-repeat: no-repeat;
opacity: 0.9;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.make-appointment .shops .emmen-btn:hover h3,
.make-appointment .shops .zwolle-btn:hover h3 {
color: #fff;
background-color: saddlebrown;
}
.make-appointment .shops .emmen-btn:hover::after,
.make-appointment .shops .zwolle-btn:hover::after {
opacity: 0.2;
}
/*about*/
.img-container {
display: -ms-grid;
display: grid;
width: 100%;
height: 450px;
gap: 40px;
-ms-grid-columns: 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr;
-ms-grid-rows: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "salon salon materials"
"salon salon blowdry";
}
.img-container div {
background-size: cover;
}
#salon {
-ms-grid-row: 1;
-ms-grid-row-span: 2;
-ms-grid-column: 1;
-ms-grid-column-span: 2;
grid-area: salon;
background-image: url(../../images/emmen-salon.jpg);
}
#materials {
-ms-grid-row: 1;
-ms-grid-column: 3;
grid-area: materials;
background-image: url(../../images/materials-bakkes.jpg);
}
#blowdry {
-ms-grid-row: 2;
-ms-grid-column: 3;
grid-area: blowdry;
background-image: url(../../images/andre-emmen.jpg);
}
.text-container p:first-of-type {
margin-bottom: 10px;
}
/*# sourceMappingURL=style.css.map */
PROBLEM : Relative URL
your images folder is at
https://mfagaikema.github.io/images
while your css file is at
https://mfagaikema.github.io/BarbershopWebsite/src/css
CSS while interpreting URL is making staring slash to compute from root of the domain
i.e.
/images/whatever.jpg
becomes
https://mfagaikema.github.io/images/whatever.jpg
Partial URLs are interpreted relative to the source of the style sheet, not relative to the document.
so I have changed relative path of url starting from where css file is located
i.e. https://mfagaikema.github.io/BarbershopWebsite/src/css
so we need to go two levels up from the location of the css file then from there go to images folder
setp by step illustration
../images/3day-shave-course.jpg
makes computed url to be
https://mfagaikema.github.io/BarbershopWebsite/src/images/3day-shave-course.jpg
../../images/3day-shave-course.jpg
makes computed url to be
https://mfagaikema.github.io/BarbershopWebsite/images/3day-shave-course.jpg
I have made the changes in css just replace it in your style.css file in src folder.
background-image: url(../../images/Stellar-Bakkes-13.jpg);
It will work.
I'm trying to style some HTML that appears in a flash card program that I use, and I feel pretty lost as to what I'm doing wrong. What I want is pretty simple (I think) and the use case struck me as ideal for flexbox, but perhaps my approach is wrong.
It's a single column of content. A primary image appears at the top of the column, while two secondary images appear side-by-side directly below the primary image. Some text appears below that.
The height of the outermost container is based on the browser height. As the browser area is reduced, the images to should scale down, but never up (beyond their nominal dimensions) if more browser area is available. The secondary images should scale down faster than the primary image; if there's limited space, more should go to the primary image. The secondary images do not usually share the same dimensions, so the bigger of the two images should begin shrinking before the smaller (i.e., only shrink when necessary). All aspect ratios should be maintained during scaling.
What I have so far (here's a fiddle) nearly does what I want, except that the secondary images won't scale down with browser height, while the primary image won't scale down with browser width. This is iteration 20 or 30 at this point, so apologies if there are a bunch of vestigial rules left behind. I could really use some help! Thanks!
EDIT: see below for a visualization of how I'd like the content to respond as browser height shrinks. Notice that 1) secondary images never exceed their yellow container 2) they only scale when they must (150x75 didn't have to scale at all since the adjacent image is tall) 3) the yellow container scales faster than the primary image and 4) all images maintain their aspect ratios.
Before Browser height reduction ---> After
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex-direction: row;
flex: 0 1.5 auto;
justify-content: center;
align-items: center;
padding: 0px;
margin: 0px;
font-size: 0;
min-width: 0;
min-height: 0;
background-color: yellow;
}
.context {
display: flex;
min-height: 0;
background-color: blue;
}
.content img {
height: 100%;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
}
.primary img {
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mobile .nightMode .primary img {
border-style: solid;
border-width: 3px;
border-color: black;
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
<div class="container">
<div class="flex-column">
<div class="primary"><img src="https://via.placeholder.com/200">
<div class="mask"><img src="https://via.placeholder.com/200/FF000"></div>
</div>
<div class="flex-row"><img src="https://via.placeholder.com/75x150"><img src="https://via.placeholder.com/150x75">
</div>
<div class="nonimage">
<div class="smallhint">Some Text<br>Other Text</div></div>
</div>
</div>
</div>
I think this could be a possible solution, #img1 being the first of the secondary images:
img {
max-width: 100%;
}
#img1 {
height: 20vw;
max-height: 150px;
min-height: 75px;
}
.primary img {
height: 50vw;
max-height: 200px;
}
These rules address the question, although there are still some issues with this approach that could be of importance.
body {
font-family: arial;
font-size: 26px;
text-align: center;
color: black;
background-color: white;
}
.smallhint {
font-size: 16px;
color: #8c8c8c;
}
img {
padding: 0;
margin: 0;
font-size: 0;
display: block;
object-fit: scale-down;
min-height: 0;
}
.flex-column {
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
height: 90vh;
flex-grow: 0;
min-width: 0;
min-height: 0;
}
.flex-row {
display: flex;
flex: 0 1.5 auto;
flex-direction: row;
justify-content: center;
align-items: center;
min-height: 0;
background-color: green;
}
.context {
display: flex;
flex-direction: column;
max-height: 100%;
background-color: blue;
}
.primary {
position: relative;
z-index: 0;
right: 0;
bottom: 0;
padding: 0;
font-size: 0;
min-height: 0;
align-items: end;
background-color: orange;
}
.primary img {
margin-left: auto;
margin-right: auto;
border-style: solid;
border-width: 3px;
border-color: black;
height: calc(100% - 2*3px);
}
.mask {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 100%;
height: 100%;
font-size: 0;
}
.nonimage {
padding-top: 5px;
display: inline;
}
I'm trying to add align="center" to this card that is from Material Design Lite:
<main class="mdl-layout__content" align="center">
<div class="mdl-cell mdl-card mdl-shadow--4dp portfolio-card">
<div class="mdl-card__title">
<h2 class="mdl-card__title-text">
<strong>FOOBAR TEXT</strong>
</h2>
</div>
<div class="mdl-card__supporting-text"></div>
</div>
I've tried adding it at each one of these divs both all together and separately and the contents with my card still won't center.
This is what it looks like from my end:
The text in the center are actually MDL buttons that appear to be text until you mouse hover over them and they "pop out" to be a button (just a bell and whistle component). As you can see, "California" isn't quite centered, and quite frankly neither are the buttons (despite the main class element containing align="center").
I am using the MDL Portfolio Template:
Preview of the template
Download link of the template
Here is the CSS as requested:
.portfolio-max-width {
max-width: 900px;
margin: auto;
justify-content: center;
}
.portfolio-header {
position: relative;
background-image: url(images/header-bg.jpg);
}
.portfolio-header .mdl-layout__header-row {
padding: 0;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
}
.mdl-layout__title {
font-size: 14px;
text-align: center;
font-weight: 300;
}
.is-compact .mdl-layout__title span {
display: none;
}
.portfolio-logo-row {
min-height: 200px;
}
.is-compact .portfolio-logo-row {
min-height: auto;
}
.portfolio-logo {
background: url(images/logo.png) 50% no-repeat;
background-size: cover;
height: 150px;
width: 150px;
margin: auto auto 10px;
}
.is-compact .portfolio-logo {
height: 50px;
width: 50px;
margin-top: 7px;
}
.portfolio-navigation-row {
background-color: rgba(0, 0, 0, 0.08);
text-transform: uppercase;
height: 45px;
}
.portfolio-navigation-row .mdl-navigation {
text-align: center;
max-width: 900px;
width: 100%;
}
.portfolio-navigation-row .mdl-navigation__link {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
line-height: 42px;
}
.portfolio-header .mdl-layout__drawer-button {
background-color: rgba(197, 197, 197, 0.44);
}
.portfolio-navigation-row .is-active {
position: relative;
font-weight: bold;
}
.portfolio-navigation-row .is-active:after {
content: "";
width: 70%;
height: 2px;
display: block;
position: absolute;
bottom: 0;
left: 0;
background-color: rgb(255,64,129);
left: 15%;
}
.portfolio-card .mdl-card__title {
padding-bottom: 0;
}
.portfolio-blog-card-full-bg {
background: url(images/example-blog03.jpg) center / cover;
}
.portfolio-blog-card-event-bg {
background: url(images/example-blog05.jpg) center / cover;
}
.portfolio-blog-card-strip-bg {
background: url(images/example-blog06.jpg) center / cover;
}
.portfolio-blog-card-compact .mdl-card__title {
padding-bottom: 0;
}
.portfolio-blog-card-bg > .mdl-card__actions {
height: 52px;
padding: 16px;
background: rgba(0, 0, 0, 0.2);
}
img.article-image {
width: 100%;
height: auto;
}
.portfolio-max-width {
max-width: 900px;
margin: auto;
}
.portfolio-copy {
max-width: 700px;
}
.no-padding {
padding: 0;
}
.no-left-padding{
padding-left: 0;
}
.no-bottom-padding {
padding-bottom: 0;
}
.padding-top {
padding: 10px 0 0;
}
.portfolio-share-btn {
position: relative;
float: right;
top: -4px;
}
.demo-card-event > .mdl-card__actions {
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
box-sizing: border-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.portfolio-contact .mdl-textfield {
width: 100%;
}
.portfolio-contact form {
max-width: 550px;
margin: auto;
}
footer {
background-image: url(images/footer-background.png);
background-size: cover;
}
use the css text-align property
.card
{
width:270px;
height:250px;
padding:2px;
text-align:center;
box-shadow:1px 1px 2px #333;
font-family:Liberation Sans;
}
<div class="card">
<div class="card-header">
<h4>CALIFORNIA</h4>
</div>
<div class="card-body">
<strong><p>xxxxxxxxx</p></strong>
<strong><p>xxxxxxxxxxx</p></strong>
<strong><p>xxxxxxxxxxx</p></strong>
<strong><p>xxxxxxxxx</p></strong>
</div>
</div>