Image not clickable - image

I have a cover of a book that I want to be clickable but I can't get the link to be the image.
<div class="imagePage">
<a href="../index.php">
<img src="../images/covers/denmark.jpg" alt="Denmark">
</a>
</div>
.imagePage {
float: left;
border-top: 30px;
padding-right: 30px;
}
Please can anyone help. I wonder if my media queries are interfering:
/* xs */
img {
width: 150px;
height: auto;
}
/* sm */
#media (min-width: 768px) {
img {
width: 200px;
}
}
/* md */
#media (min-width: 992px) {
img {
width: 350px;
}
}
/* lg */
#media (min-width: 1200px) {
img {
width: 500px;
}
}
Edit: I am using bootstrap. Here is my whole CSS:
body {
padding-top: 30px;
font-size: 16px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif !important;
}
#media (max-width: 979px) {
body {
padding-top: 30px;
}
}
/* xs */
img {
width: 150px;
height: auto;
}
/* sm */
#media (min-width: 768px) {
img {
width: 200px;
}
}
/* md */
#media (min-width: 992px) {
img {
width: 350px;
}
}
/* lg */
#media (min-width: 1200px) {
img {
width: 500px;
}
}
/* xs */
p {
font-size: 12px;
}
/* sm */
#media (min-width: 768px) {
p {
font-size: 14px;
}
}
/* md */
#media (min-width: 992px) {
p {
font-size: 16px;
}
}
/* lg */
#media (min-width: 1200px) {
p {
font-size: 18px;
}
}
/* xs */
h1 {
font-size: 28px !important;
}
/* sm */
#media (min-width: 768px) {
h1 {
font-size: 50px !important;
}
}
/* md */
#media (min-width: 992px) {
h1 {
font-size: 84px !important;
}
}
/* lg */
#media (min-width: 1200px) {
h1 {
font-size: 96px !important;
}
}
.navbar-left img {
width: auto;
}
.sm-bt img {
width: auto;
}
.end img {
width: auto;
}
.titlePage img {
max-width: 280px;
}
/*---Start Parallax---*/
.parallax-top {
background-image: url("../images/hero3.jpg");
height: 1200px;
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
.main .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0;
}
.main .caption h1 {
margin-top: 0px;
}
.main .caption p {
width: 80%;
margin: auto;
margin-bottom: 10px;
}
.parallax-middle {
background-image: url("../images/hero1.jpg");
height: 1200px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.caption-middle {
position: relative;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
font-size: 20px;
background-color: black;
opacity: 0.75;
height: auto;
padding: 1%;
}
.parallax-bottom {
background-image: url("../images/hero2.jpg");
height: 1200px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.caption-bottom {
position: relative;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
padding: 1%;
height: auto;
}
/*---End Parallax---*/
.box {
height: 200px;
font-size: 40px;
margin-top: 80px;
text-align: center;
}
.thumbs {
margin-right: 15px;
max-width: auto;
}
.thumbnail {
border: none !important;
}
.fb-page {
margin-right: 50px;
}
.footer {
padding-top: 5px;
position: relative;
bottom: 0;
width: 100%;
height: auto;
background-color: #fff;
text-align: center;
}
.footer p {
font-size: 12px;
}
#media (min-width: 768px) {
.footer p {
font-size: 14px;
}
}
#media (min-width: 992px) {
.footer p {
font-size: 16px;
}
}
.sm-bt a {
float: right;
margin-top: 12px;
margin-right: 5px;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
.pageOuter {
padding-top: 20px;
}
.imagePage {
float: left;
border-top: 30px;
padding-right: 30px;
}
.blurb {
display: block;
position: relative;
}
/*---Title Pages---*/
.pageOuter {
background-image: url("../images/background.png");
}
.titlePage {
width: 80%;
margin: auto;
padding-top: 30px;
padding-bottom: 30px
}
.titlePage .jumbotron {
width: 45%;
font-size: 14px;
float: right;
padding: 25px !important;
margin-right: 0px;
opacity: 0.7;
}
#media screen and (min-width: 468px) {
.titlePage .jumbotron p {
font-size: 16px;
}
.titlePage .jumbotron h3 {
font-size: 18px;
}
}
#media screen and (min-width: 1200px) {
.titlePage .jumbotron p {
font-size: 20px;
}
.titlePage .jumbotron h3 {
font-size: 24px;
}
}
.titlePage .container {
width: 100% !important;
margin-right: 0px;
}
.titlePage h1 {
text-align: center;
}
.titlePage h2 {
text-align: center;
}
.titlePage h3 {
text-align: center;
}
.titlePage p {
color: #4d4d4d;
line-height: 1.59;
margin-top: 0em;
margin-bottom: 1em;
}
.titleDetails ul {
list-style-type: none;
padding-left: 0;
}
.titleDetails ul li {
font-size: 14px;
color: #4d4d4d;
line-height: 1.59;
}
#media (min-width: 768px) {
.titleDetails ul li {
font-size: 16px;
color: #4d4d4d;
line-height: 1.59;
}
}
#media (min-width: 992px) {
.titleDetails ul li {
font-size: 18px;
color: #4d4d4d;
line-height: 1.59;
}
}
.titleDetails h3 {
text-align: left;
font-size: 20px;
}
.titleDetails {
margin-right: 0px;
float: left;
}
/*---End Title Pages---*/
/*---Start Contact---*/
.contactPage {
width: 80%;
margin: auto;
padding-top: 30px;
padding-bottom: 30px;
}
.contactPage h1 {
text-align: center;
}
.contactPage .jumbotron {
width: 40%;
padding: 10px;
position: center;
}
#media screen and (min-width: 468px) {
.contactPage .jumbotron p {
font-size: 16px;
}
.contactPage .jumbotron h3 {
font-size: 18px;
}
}
#media screen and (min-width: 1200px) {
.contactPage .jumbotron p {
font-size: 20px;
}
.contactPage .jumbotron h3 {
font-size: 24px;
}
}
.home-btn {
text-align: center;
}
/*---end Contact---*/
.regionPage {
width: 80%;
margin: auto;
padding-top: 20px;
}
/*---Start Africa---*/
.africaHero {
background-image: url("../images/africaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.africaHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---end Africa---*/
/*---Start Author---*/
.authorHero {
background-image: url("../images/hero4.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.authorHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---end Author---*/
/*---Start Asia--*/
.asiaHero {
background-image: url("../images/asiaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.asiaHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---end asia---*/
/*---Start Australasia---*/
/*---End Australasia---*/
.australasiaHero {
background-image: url("../images/australasiaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.australasiaHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---Start N America---*/
.namericaHero {
background-image: url("../images/namericaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.namericaHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---end N America---*/
/*---Start S America---*/
.samericaHero {
background-image: url("../images/samericaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.samericaHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---End S America--*/
/*---Start Europe---*/
.europeHero {
background-image: url("../images/europeHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.europeHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---Start Why CS---*/
.whyHero {
background-image: url("../images/hero5.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.whyHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---end Why CS---*/
/*---Start authors---*/
.authors .caption {
text-align: center;
}
.authorPage img {
display: block;
margin: auto;
}
.authorPage p {
margin-top: 25px;
}
.authorPage {
width: 80%;
margin: auto;
}
.authorPage h1 {
text-align: center;
}
.authorPage .container{
display: flex
}
.authorPage .jumbotron {
width: 40%;
padding: 3px;
position: center;
margin: 5%;
}
.authorPage ul {
list-style-type: none;
padding-left: 0;
}
#media screen and (min-width: 468px) {
.authorPage .jumbotron p {
font-size: 16px;
}
.author .jumbotron h3 {
font-size: 18px;
}
}
#media screen and (min-width: 1200px) {
.authorPage .jumbotron p {
font-size: 20px;
}
.authorPage .jumbotron h3 {
font-size: 24px;
}
}
/*---End authors---*/
/*---start team---*/
h1 {
text-align: center;
}
.team1 {
padding: 2%;
}
.team2 {
padding: 2%;
}
.team1 img {
float: right;
margin-left: 10px;
padding: 10px;
}
.team2 img {
float: left;
margin-right: 15px;
padding: 10px;
}
CodePen

Hi i have fixed the issue by adding position and z-index to your imagePage div. Please check the styling below and please let me know.
.imagePage {
float: left;
border-top: 30px;
padding-right: 30px;
position: relative;
z-index: 10;
}

Related

Why is safari does not react to my media queries?

I have a bunch of queries in my page. Chrome responds to all of them and Safari just won't render almost all of them and I'm wondering why. I can't even see them in Safari DevTools.
I thought that maybe there's something going on with root font-size or maybe browser scale so I set font-size to 100% and added specific value for breakpoints but I didn't worked out.
Here are queries from my .scss
#mixin respond ($breakpoint){
#if $breakpoint == ipadLand {
#media screen and (width: 1024px) and (height: 768px) {
body {
font-size: 75%;
}
.button_text{
font-size: 0.9rem;
}
.contacts_section_row{
top: 4.5rem;
}
.contact_header{
margin-top: 2rem;
}
.skills_container_row3{
margin-bottom: 0.5rem;
}
.contacts_section_col{
width: $picture_width;
}
.contacts_section_row{
width: calc(#{$picture_width} * 3);
}
.vk_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.tg_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.hh_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
}}
#if $breakpoint == ipadpro12_port {
#media screen and (width: 1024px) and (height: 1366px){
$contact_section_height: 20rem;
body {
font-size: 120%;
}
.name_text{
font-size: 2.5rem;
padding-top: 1rem;
padding-left: 5vw;
}
.role_text{
font-size: 1.7rem;
padding-top: 0.6rem;
padding-left: 1rem;
}
.main_div{
height: 985.3px;
//height: calc((100vh + (#{$head_div_height} * 2)));
}
.photo_box{
height: 40%;
width: 100vw;
}
.photo{
margin: 0 auto;
margin-top: 50px;
width: auto;
height: 85%;
}
.vk_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.tg_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.hh_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.contacts_section_col{
width: calc((#{$picture_width} * 3) / 3);
}
.contacts_section_row{
margin-top: 1rem;
width: calc(#{$picture_width} * 3)
}
.contact_header{
text-align: center;
height: auto;
width: inherit;
margin: 0 auto;
margin-top: 1rem;
transform: translate(0);
}
.skills_container_row{
font-size: 2.5rem;
margin: 0px;
}
.skillsandprojects-col-one{
font-size: 2rem;
height: auto;
text-align: left;
}
.skillsandprojects_container{
position: absolute;
top: 40%;
right: 0;
left: 0;
width: 100%;
height: 35%;
margin: 0;
background-color: white;
border: none;
}
.contacts_section{
position: relative;
bottom: calc(100vh - (#{$main_div_height} + #{$head_div_height} + #{$contact_section_height}));
width: 100vw;
height: $contact_section_height;
//background-color: blue; }
//background-color: $header_text_color;
}
.button_text{
font-size: 1.6rem;
}
.skillsandprojects_container2{
position: absolute;
top: 75%;
right: 0;
left: 0;
height: 35%;
width: 100%;
}
.skills_container_row3{
width: 100%;
height: 39px;
border: none;
margin-bottom: 1rem;
}
}}
#if $breakpoint == ipad_port {
#media screen and (width: 768px) and (height: 1024px){
body {
font-size: 70%;
}
.name_text{
font-size: 1.5rem;
padding-top: 2rem;
padding-left: 5vw;
}
.role_text{
font-size: 0.7rem;
padding-top: 0.6rem;
padding-left: 0.5rem;
}
.main_div{
height: calc((100vh - (#{$head_div_height} + #{$contact_section_height})));
//height: 985.3px;
//height: calc((100vh + (#{$head_div_height} * 2)));
}
.photo_box{
height: 40%;
width: 100vw;
}
.photo{
margin: 0 auto;
margin-top: 25px;
width: auto;
height: 75%;
}
.vk_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.tg_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.hh_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.contacts_section_col{
width: calc((#{$picture_width} * 3) / 3);
}
.contacts_section_row{
width: calc(#{$picture_width} * 3)
}
.contact_header{
text-align: center;
height: auto;
width: inherit;
margin: 0 auto;
transform: translate(0);
}
.skills_container_row{
font-size: 1.5rem;
margin: 0px;
}
.skillsandprojects-col-one{
font-size: 1.8rem;
height: auto;
text-align: left;
}
.skillsandprojects_container{
position: absolute;
top: 40%;
right: 0;
left: 0;
width: 100%;
height: 35%;
margin: 0;
background-color: white;
border: none;
}
.button_text{
font-size: 0.79rem;
}
.skillsandprojects_container2{
position: absolute;
top: 75%;
right: 0;
left: 0;
height: 35%;
width: 100%;
}
.skills_container_row3{
width: 100%;
height: 39px;
border: none;
}
.contacts_section{
margin-top: 6rem;
}
}}
#if $breakpoint == phone {
#media screen and (max-width: 573px) and (max-height: 926px){
.name_text{
font-size: 1.5rem;
padding-top: 2rem;
padding-left: 5vw;
}
.role_text{
font-size: 0.7rem;
padding-top: 0.6rem;
padding-left: 0.5rem;
}
.main_div{
height: 985.3px;
//height: calc((100vh + (#{$head_div_height} * 2)));
}
.contact_header{
text-align: center;
height: auto;
width: inherit;
//height: $contacts_section_header_height;
transform: translate(0);
//margin: 0 auto;
margin-bottom: 0.2rem; }
.photo_box{
height: 40%;
width: 100vw;
}
.vk_picture{
width: 3.437rem;
height: 3.437rem;
}
.tg_picture{
width: 3.437rem;
height: 3.437rem;
}
.hh_picture{
width: 3.437rem;
height: 3.437rem;
}
.contacts_section_col{
width: calc((#{3.437rem} * 3) / 3);
}
.contacts_section_row{
width: calc(#{3.437rem} * 3)
}
.skills_container_row{
font-size: 1.5rem;
margin: 0px;
}
.skillsandprojects-col-one{
font-size: 1.8rem;
height: auto;
text-align: left;
}
.skillsandprojects_container{
position: absolute;
top: 40%;
right: 0;
left: 0;
width: 100%;
height: 35%;
margin: 0;
background-color: white;
border: none;
}
.button_text{
font-size: 0.9rem;
}
.skillsandprojects_container2{
position: absolute;
top: 75%;
right: 0;
left: 0;
height: 35%;
width: 100%;
}
.skills_container_row3{
width: 100%;
height: 39px;
//height: calc((100% - #{$skills_head-row})/3);
border: none;
}
}
}
#if $breakpoint == mac13 {
#media screen and (width: 1366px) and (height: 768px) {
.button_text{
font-size: 0.8rem;
}
}
}
#if $breakpoint == ipad11pro_port {
#media screen and (height: 1112px) and (width: 834px) {
body {
font-size: 70%;
}
.name_text{
font-size: 2.5rem;
padding-top: 1rem;
padding-left: 5vw;
}
.role_text{
font-size: 1.7rem;
padding-top: 0.6rem;
padding-left: 1rem;
}
.main_div{
height: 985.3px;
//height: calc((100vh + (#{$head_div_height} * 2)));
}
.photo_box{
height: 40%;
width: 100vw;
}
.photo{
margin: 0 auto;
margin-top: 50px;
width: auto;
height: 85%;
}
.vk_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.tg_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.hh_picture{
height: $picture_width;
width: $picture_width;
margin: auto;
}
.contacts_section_col{
width: calc((#{$picture_width} * 3) / 3);
}
.contacts_section_row{
margin-top: 1rem;
width: calc(#{$picture_width} * 3)
}
.button_text{
font-size: 1.3rem;
}
.contact_header{
text-align: center;
height: auto;
width: inherit;
margin: 0 auto;
margin-top: 1rem;
transform: translate(0);
}
.skills_container_row{
font-size: 2.5rem;
margin: 0px;
}
.skillsandprojects-col-one{
font-size: 2rem;
height: auto;
text-align: left;
}
.skillsandprojects_container{
position: absolute;
top: 40%;
right: 0;
left: 0;
width: 100%;
height: 35%;
margin: 0;
background-color: white;
border: none;
}
.contacts_section{
position: relative;
bottom: calc(100vh - (#{$main_div_height} + #{$head_div_height} + #{$contact_section_height}));
width: 100vw;
height: $contact_section_height;
}
.skillsandprojects_container2{
position: absolute;
top: 75%;
right: 0;
left: 0;
height: 35%;
width: 100%;
}
.skills_container_row3{
width: 100%;
height: 39px;
border: none;
margin-bottom: 1rem;
}
}
}
#if $breakpoint == ipad11pro_land {
#media screen and (width: 834px) and (height: 1112px) {
body {
font-size: 1200%;
}
.button_text {font-size: 1rem;}
}
}}
Okay, I figured this.
I haven't made it work the way I planned initially but I guess this will be the best thing to do.
THE ANSWER
So apparently Safari doesn't react to media queries with specific resolutions and you have to use ranges with either min or max height or width. Just rewrite your queries and Safari will handle them right
Before you throw me a comment - yes, I'm aware that it's not the best practice to put specific resolutions and media queries. I was trying to make this way so I can tailor the design for each resolution. I didn't wanted to expand mobile design for tablets and I did wanted them to keep desktop version in landscape while preserve mobile in portrait.
The easier way to achieve that effect was to aim in specific green sizes - it didn't work out and now I realize that I can achieve the same effect with different queries for width and height.
As a bonus I'm willing to share queries sizes I found perfect for screens from iPhone SE to MacBook Pro 16
#mixin respond ($breakpoint){
#if $breakpoint == phone {
#media screen and (max-width: 1024px) and (max-height: 1366px){
//this is for phones and tablets in portrait
// query styles go here }}
#if $breakpoint == tab_land {
#media screen and (min-width: 1024px) and (max-height: 1366px){
//query styles go here}
}}
#if $breakpoint == mac13 {
#media screen and (min-width: 1366px) {
// query styles go here }}
#if $breakpoint == mac15 {
#media screen and (min-width: 1600px) {
// query styles go here
}}
#if $breakpoint == mac16 {
#media screen and (min-width: 2560px) {
// query styles go here
}
}

Why does my <ul> become hidden in desktop mode?

Sorry if this question has already been asked, I don't find anything similar.
So I am following a course and I have created the mobile navbar, which works. Then I write the mediaquery for larger screens and the list, instead of being displayed to the right of the navbar, is hidden.
If I inspect the page I can see that the list and the list items are on the right spot, but they are not visible. I have tried with "visibility: visible" but it doesnt' work.
Where is the mistake?
const collapsibles = document.querySelectorAll(".collapsible");
collapsibles.forEach((item) =>
item.addEventListener("click", function () {
this.classList.toggle("collapsible--expanded");
})
);
/* Typography */
html {
font-size: 62.5%;
}
:root {
--color-primary: #2584ff;
--color-secondary: #00d9ff;
--color-accent: #ff3400;
--color-headings: #1b0760;
--color-body: #918ca4;
--color-border: #ccc;
--border-radius: 30px;
--color-body-darker: #5c5577;
}
body {
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 2.4rem;
line-height: 1.5;
color: var(--color-body);
}
h1,
h2,
h3 {
color: var(--color-headings);
margin-bottom: 1rem;
}
h1 {
font-size: 7rem;
}
h2 {
font-size: 4rem;
}
h3 {
font-size: 3rem;
}
p {
margin-top: 0;
}
#media screen and (min-width: 1024px) {
body {
font-size: 1.8rem;
}
h1 {
font-size: 8rem;
}
h2 {
font-size: 4rem;
}
h3 {
font-size: 2.4rem;
}
}
/* Links */
a {
text-decoration: none;
}
.link-arrow {
color: var(--color-accent);
text-transform: uppercase;
font-size: 2rem;
font-weight: bold;
}
.link-arrow::after {
content: "-->";
margin-left: 5px;
transition: margin 0.15s;
}
.link-arrow:hover::after {
margin-left: 10px;
}
#media screen and (min-width: 1024px) {
.link-arrow {
font-size: 1.5rem;
}
}
/* Badges */
.badge {
border-radius: 20px;
font-size: 2rem;
font-weight: 600;
padding: 0.5rem 2rem;
white-space: nowrap;
}
.badge--primary {
background: var(--color-primary);
color: white;
}
.badge--secondary {
background: var(--color-secondary);
color: white;
}
.badge--small {
font-size: 1.6rem;
padding: 0.5rem 1.5rem;
}
#media screen and (min-width: 1024px) {
.badge {
font-size: 1.5rem;
}
.badge--small {
font-size: 1.2rem;
}
}
/* Lists */
.list {
list-style: none;
padding-left: 0;
color: var(--color-headings);
}
.list--inline .list__item {
display: inline-block;
margin-right: 2rem;
}
.list--tick {
list-style-image: url(/images/tick.svg);
padding-left: 3rem;
}
.list--tick .list__item {
padding-left: 0.5rem;
margin-bottom: 1rem;
}
#media screen and (min-width: 1024px) {
.list--tick .list__item {
padding-left: 0;
}
}
/* Icons */
.icon {
width: 40px;
height: 40px;
}
.icon--small {
width: 30px;
height: 30px;
}
.icon--primary {
fill: var(--color-primary);
}
.icon--white {
fill: white;
}
.icon-container {
background: #f3f9fa;
width: 64px;
height: 64px;
border-radius: 100%;
display: inline-flex;
justify-content: center;
align-items: center;
}
.icon-container--accent {
background: var(--color-accent);
}
/* Buttons */
.btn {
border-radius: 40px;
border: none;
cursor: pointer;
font-size: 1.8rem;
font-weight: 600;
margin-left: 5px;
margin-top: 5px;
padding: 2rem 3rem;
text-transform: uppercase;
white-space: nowrap;
}
.btn--primary {
background-color: var(--color-primary);
color: white;
}
.btn--primary:hover {
background: #8a91f3;
}
.btn--secondary {
background-color: var(--color-secondary);
color: white;
}
.btn--accent {
background-color: var(--color-accent);
color: white;
}
.btn--accent:hover {
background: #e66545;
}
.btn--outline {
background-color: white;
color: black;
border: 2px solid var(--color-headings);
}
.btn--block {
display: inline-block;
width: 100%;
}
.btn--stretched {
padding-left: 6rem;
padding-right: 6rem;
}
/* Input */
.input {
border-radius: 30px;
border: 1px solid #ccc;
color: var(--color-headings);
font-size: 2rem;
outline: 0;
padding: 1.5rem 3.5rem;
}
::placeholder {
color: #cdcbd7;
}
.input-group {
border: 1px solid var(--color-border);
border-radius: var(--border-radius);
display: flex;
}
.input-group .input {
border: 0;
flex-grow: 1;
padding: 1rem 1rem;
}
.input-group .btn {
margin: 4px;
}
#media screen and (min-width: 1024px) {
.input {
font-size: 1.5rem;
}
}
/* Cards */
.card {
border-radius: 7px;
box-shadow: 0 0 20px 10px #f3f3f3;
overflow: hidden;
min-width: 300px;
}
.card__header,
.card__body {
padding: 2rem 3rem;
}
.card--primary .card__header {
background: var(--color-primary);
color: #fff;
}
.card--secondary .card__header {
background: var(--color-secondary);
color: #fff;
}
.card--secondary .badge--secondary {
background: #02cdf1;
}
/* Plans */
.plan__name {
color: #fff;
margin: 0;
font-weight: 500;
font-size: 2.4rem;
}
.plan__price {
font-size: 6rem;
}
.plan__billing-cycle {
font-size: 2.4rem;
font-weight: 300;
opacity: 0.8;
margin-right: 1rem;
}
.plan__description {
font-size: 2rem;
font-weight: 300;
letter-spacing: 1px;
display: block;
}
.plan .list__item {
margin-bottom: 2rem;
}
.plan--popular .card__header {
position: relative;
}
.plan--popular .card__header::before {
content: url(/images/popular.svg);
width: 40px;
display: inline-block;
position: absolute;
top: -6px;
right: 5%;
}
#media screen and (min-width: 1024px) {
.plan__name {
font-size: 1.4rem;
}
.plan__price {
font-size: 5rem;
}
.plan__billing-cycle {
font-size: 1.6rem;
}
.plan__description {
font-size: 1.7rem;
}
}
/* Media */
.media {
display: flex;
max-width: 500px;
}
.media__title {
margin-top: 0;
}
.media__body {
margin: 0 2rem;
}
.media__image {
margin-top: 1rem;
}
/* Quotes */
.quote {
font-size: 3rem;
font-style: italic;
color: var(--color-body-darker);
line-height: 1.3;
}
.quote__text::before {
content: open-quote;
}
.quote__text::after {
content: close-quote;
}
/* footer p {
font-size: 1.6rem;
}
*/
.quote__company {
font-size: 1.6rem;
opacity: 0.4;
color: var(--color-headings);
font-style: normal;
}
/* Grids */
.grid {
display: grid;
}
#media screen and (min-width: 768px) {
.grid--1x2 {
grid-template-columns: 1fr 1fr;
}
}
#media screen and (min-width: 1024px) {
.grid--1x3 {
grid-template-columns: 1fr 1fr 1fr;
}
}
/* testimonials */
.testimonial {
padding: 3rem;
}
.testimonial__image {
position: relative;
}
.testimonial__image > img {
width: 100%;
}
.testimonial__image > .icon-container {
position: absolute;
top: 3rem;
right: -32px;
}
/* Callout */
.callout {
padding: 4rem;
border-radius: 5px;
}
.callout--primary {
background: var(--color-primary);
color: white;
}
.callout__heading {
color: white;
margin-top: 0;
font-size: 3rem;
}
.callout .btn {
justify-self: center;
align-self: center;
}
.callout__content {
text-align: center;
}
#media screen and (min-width: 768px) {
.callout .grid--1x2 {
grid-template-columns: 1fr auto;
}
.callout__content {
text-align: left;
}
.callout .btn {
justify-self: start;
margin: 0 2rem;
}
}
/* COLLAPSIBLES */
.collapsible__header {
display: flex;
justify-content: space-between;
}
.collapsible__heading {
margin-top: 0;
font-size: 3rem;
}
.collapsible__chevron {
transform: rotate(-90deg);
transition: transform 0.3s;
}
.collapsible__content {
max-height: 0;
overflow: hidden;
transition: all 0.3s;
opacity: 0;
}
.collapsible--expanded .collapsible__chevron {
transform: rotate(0);
}
.collapsible--expanded .collapsible__content {
display: block;
max-height: 100vh;
opacity: 1;
}
/* Blocks */
.block {
--padding-vertical: 6rem;
padding: var(--padding-vertical) 2rem;
}
.block__heading {
margin-top: 0;
}
.block--dark {
background: black;
color: #7b858b;
}
.block--dark .block__heading {
color: white;
}
.block--skewed-right {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 80%);
padding-bottom: calc(var(--padding-vertical) + 4rem);
}
.block--skewed-left {
clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 0% 100%);
padding-bottom: calc(var(--padding-vertical) + 4rem);
}
.block__header {
text-align: center;
}
/* nav */
.nav {
background: black;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
padding: 0 1rem;
align-items: center;
}
.nav__list {
width: 100%;
margin: 0;
}
.nav__item {
padding: 0.5rem 2rem;
border-bottom: 1px solid #222;
}
.nav__item > a {
color: #d2d0db;
transition: color 0.3s;
}
.nav__item > a:hover {
color: #fff;
}
.nav__toggler {
opacity: 0.5;
transition: box-shadow 0.15s;
cursor: pointer;
}
.nav.collapsible--expanded .nav__toggler {
opacity: 1;
box-shadow: 0 0 0 3px #666;
border-radius: 5px;
}
#media screen and (min-width: 768px) {
.nav__toggler {
display: none;
}
.nav__list {
width: auto;
display: flex;
visibility: ;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght#400;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/css/normalize.css" />
<link rel="stylesheet" href="/css/styles.css" />
</head>
<body>
<nav class="nav collapsible">
<img src="/images/logo.svg" alt="" />
<svg class="icon icon--white nav__toggler">
<use xlink:href="images/sprite.svg#menu"></use>
</svg>
<ul class="list nav__list collapsible__content">
<li class="nav__item">Hosting</li>
<li class="nav__item">VPS</li>
<li class="nav__item">Domain</li>
<li class="nav__item">Pricing</li>
</ul>
</nav>
<script src="/js/main.js"></script>
</body>
</html>
Problem was solved by adding max-height: 100%; opacity:1 to the .nav__list rule in CSS.

My blogger dropdown sub menu disappears on hover

I just copies this code from a tutorial, But I try to open sub menu it disappears. I don't know what to do Please help me.
#nav_wrapper1 {
width: 100%;
}
.nav_wrapper {
border-bottom:1px solid white;
left: 0;
top:0;
position:top;
width: 100%;
transition: top .5s ease-out;
background: #170030;
height:60px;
z-index:99999;
}
.btn {
padding: 10px 1%;
margin: 5px;
color: #fff;
text-decoration: none;
font-family: normal;
transition: all 0.1s ease;
}
.btn:hover {
transition: all 0.1s ease;
}
#search i {color: #fff;
font-size: 22px;}
#search {
float: right;
font-size: 22px;
padding: 20px 25px;
line-height: 0px;
color: #fff;
margin: 0;
font-weight: 700;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
#search:hover {
background: #111;
}
.search_box {
clear: both;
width: 40%;
background: #111;
padding: 0;
margin: 0;
height: 0;
overflow: hidden;
transition: all 0.1s ease-in-out;
float:right;
z-index:99999999999;
}
.search_box.active {
height: auto;
padding: 10px 0;
width:40%;
}
.search_box input {
width: 60%;
font-size: 13px;
margin: 0 0 0 10px;
padding: 10px;
border: none;
background: #fff;
}
.search_box input:focus {
outline: none;
}
.search_box input.search_icon {
clear: both;
width: 30%;
height: auto;
padding: 10px;
margin: 0;
margin-right:10px;
border: none;
color: #fff;
cursor: pointer;
background: #6a00de;
opacity: 1;
transition: all 0.1s ease;
float:right;
}
.search_box input.search_icon:hover {
background: #FFF;
color:#111;
}
.menu-link {
display: none;
}
.spinner-master input[type=checkbox] {
display: none;
}
.menu {
width: 100%;
height: auto;
background: #170030;
color:#170030;
transition: all 0.3s ease;
margin-top:5px;
}
.menu ul {
padding: 0px;
margin: 0px;
list-style: none;
position: relative;
display: inline-block;
}
.menu > li > ul.sub_menu {
min-width: 10em;
padding: 4px 0;
background-color: #111;
border: 1px solid #fff;
}
.menu ul li {
padding: 0px;
}
.menu > ul > li {
display: inline-block;
}
.menu ul li a {
display: block;
text-decoration: none;
color: #fff;
font-size: 18px;
height:100%;
}
.menu ul li a:hover {
background: #111;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #FFF;
}
.menu ul li > a {
padding: 15px;
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
.menu ul li:hover > ul {
display: block;
}
.menu ul ul > li {
position: relative;
}
.menu ul ul > li a {
padding: 10px 15px;
height: auto;
background: #000000;
}
.menu ul ul > li a:hover {
background: #111;
color: #fff;
}
.menu ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
#media all and (max-width: 860px) {
.example-header .container {
width: 100%;
}
#search {
color: #fff;
padding: 0px 20px 0px 5px;
margin-top:25px;
}
.spinner-master * {
transition: all 0.3s;
box-sizing: border-box;
}
.spinner-master {
position: relative;
margin: 15px;
height: 30px;
width: 30px;
float: left;
}
.spinner-master label {
cursor: pointer;
position: absolute;
z-index: 99;
height: 100%;
width: 100%;
top: 5px;
left: 0;
}
.spinner-master .spinner {
position: absolute;
height: 4px;
width: 100%;
padding: 0;
background-color: #fff;
}
.spinner-master .diagonal.part-1 {
position: relative;
float: left;
}
.spinner-master .horizontal {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master .diagonal.part-2 {
position: relative;
float: left;
margin-top: 4px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .horizontal {
opacity: 0;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-1 {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin-top: 10px;
}
.spinner-master input[type=checkbox]:checked ~ .spinner-spin > .diagonal.part-2 {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
margin-top: -12px;
}
a.menu-link {
display: block;
color: #fff;
float: left;
text-decoration: none;
padding: 10px 16px;
font-size: 1.5em;
}
a.menu-link:hover {
color: #efa666;
}
a.menu-link:after {
content: “2630”;
font-weight: normal;
}
a.menu-link.active:after {
content: “2715”;
}
.menu {
clear: both;
min-width: inherit;
float: none;
top:0px;
position:relative;
}
.menu, .menu > ul ul {
overflow: hidden;
max-height: 0;
background-color: #39484d;
}
.menu > li > ul.sub-menu {
padding: 0px;
border: none
}
.menu.active, .menu > ul ul.active {
max-height: 55em;
}
.menu ul {
display: inline;
}
.menu li, .menu > ul > li {
display: block;
}
.menu > ul > li:last-of-type a {
border: none;
}
.menu li a {
color: #fff;
display: block;
padding: 0.8em;
position: relative;
}
.menu li.has-submenu > a:after {`
content: ‘+’;
position: absolute;
top: 0;
right: 0;
display: block;
font-size: 1.5em;
padding: 0.55em 0.5em;
}
.menu li.has-submenu > a.active:after {
content: “-“;
}
.menu ul ul > li a {
background:#170030;
padding: 10px 18px 10px 30px;
border-bottom: 1px solid #111;
}
.menu ul li a:hover {
background: #4b5f65;
color: #fff;
}
.menu ul li.hover > a {
background: #111;
color: #fff;
}
.menu ul ul, .menu ul ul ul {
display: inherit;
position: relative;
left: auto;
top: auto;
border: none;
}
.search_box.active {
position: absolute;
top: 63px;
z-index: 10;
width:70%;
right:2px;
}
.search_box input {
width: 50%;
float:left;
}
.search_box input.search_icon {
width: 30%;
float:right;
margin-right:14px;
margin-top:-37px;
}
}
.menu ul ul {
display: none;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
delete display: none
.menu ul ul {
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
or change to display:block;
.menu ul ul {
display:block;
position: absolute;
top: 100%;
min-width: 160px;
background: #111;
}
try it..

How better to deal big .scss file in laravel app

In my Laravel 7.6 / blade / bootstrap 4 / flex app I have resources/sass/frontend.scss file more 1000 rows
Also I use resources/sass/_variables.scss with about 40 lines
I run command
npm run watch-poll
and it takes rather wrong time to compile my 2 scss files.
I want to split frontend.scss into several small scss files and wonder how better to make it for
better performance?
In my resources/views/layouts/frontend.blade.php I have
<link href="{{ asset('css/bootstrap.min.css') }}" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" href="/favicon.ico"/>
<link rel="alternate" type="application/atom+xml" title="News" href="/feed">
<link href="{{ asset('css/frontend.css') }}{{ "?dt=".time() }}" rel="stylesheet" type="text/css">
Having several small scss files is it better to include them in at top
of frontend.scss, like I do with _variables.scss?
If the order of these files have meaning?
Or maybe beetr to include generated .css file in frontend.blade.php ?
Or some other way ?
UPDATED # 1:
I have resources/sass/_variables.scss :
// Body
// Typography
$font-family-sans-serif: "Roboto", sans-serif;
$font-size-base: 0.9rem;
$line-height-base: 1.6;
$text-color: #636b6f;
$font_size: 18px;
//$font_size: 24px;
$background_color: #f5f8fa;
$border_color: #999;
$border-separator-color: 0.05rem solid #b3b3b3;
$item-border: 1px solid #92baa7;
$button_color: #FFFFFF; /* color of button */
$cancel_background_color: #949494; /* background color of cancel button */
$prev_background_color: #45A6F9; /* background color of previos button */
$text_error_color: red;
$link_color: #475fe8;//maroon;
$toggle_color: olive;
$indent_xs_1: 0.1em;
$indent_xs_2: 0.2em;
$indent_xs: 0.3em;
$indent_sm: 0.5em;
$indent_md: 1em;
$indent_lg: 2em;
$text_color : #00001D;
$indent_img : 0.7em; /* $indent for image : margin, padding */
$current_admin_template: 'defaultBS41Backend';
$debug_mode : false;
and full content resources/sass/FlexyFrontend/frontend.scss :
#import "node_modules/font-awesome/scss/font-awesome";
#font-face {
font-family:'Simple line icons';
src:url('/fonts/simple-line-icons/Simple-Line-Icons.ttf');
font-style:normal;
}
#font-face {
font-family:'Themify';
src:url('/fonts/themify/themify.ttf');
font-style:normal;
}
#font-face {
font-family:'Source sans pro';
src:url('/fonts/source-sans/sourcesanspro-regular-webfont.ttf');
font-style:normal
}
#font-face {
font-family:'Open sans' ;
src:url('/fonts/opensans/opensans.ttf');
font-style:normal;
}
#font-face {
font-family:'DejaVu Sans';
src:url('/fonts/DejaVuSans/DejaVuSans-Bold.ttf');
font-style:normal;
}
// Variables
#import "../variables";
// Bootstrap
#import '~bootstrap/scss/bootstrap';
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: $background_color;
//color: #cccccc;
//font-size: 14px;
/* Helvetica/Arial-based sans serif stack */
font-family: 'Roboto', 'Open Sans';
font-size: $font_size;
}
.wrapper_area {
height: 100%;
display: flex;
flex-direction: column;
}
.header_area, .footer_area {
background: silver;
}
.content_area {
flex: 1;
overflow: auto;
background: pink;
}
/// COMMON ELEMENTS BLOCK START
.bordered_item {
border: 1px ridge grey !important;
//border: 2px solid yellow;
}
.bordered_block {
border: $border-separator-color;
font-size: $font_size;
color: $text-color;
padding: 0 0.4em 0.4em 0.4em;
margin: 0 0 1.5em 0;
-webkit-box-shadow: 5px 5px 5px 5px #000;
box-shadow: 2px 2px 2px 2px #d7d7d7;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-border-radius: 8px;
}
.hidden_info {
color:$background_color;
//display: none;
//color:$text-color;
background-color:$background_color;
}
/// COMMON ELEMENTS BLOCK END
.page_content_container {
#if ($debug_mode) {
border: 3px dotted yellow;
}
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
justify-self: flex-start;
justify-items: flex-start;
}
.raised_page_content_container {
flex: 1 1 200px;
padding: 20px;
margin: auto;
margin-top: 15%;
overflow-y: auto;
}
.page_content_header {
#if ($debug_mode) {
border: 0.2rem dotted green;
}
padding: 0px;
margin: 0;
}
.page_content {
flex: 1 1;
#if ($debug_mode) {
border: 3px dotted red !important;
}
justify-self: flex-start;
justify-items: flex-start;
align-self: flex-start;
align-items: flex-start;
padding: 0;
margin: 0;
width: 100% !important;
height: 100% !important;
.bordered_block{}
}
.page_content_footer {
flex: 1;
#if ($debug_mode) {
border: 2px dotted olive;
}
padding: 0px;
margin: 0;
}
.content_container {
width: 100%;
padding: 4px;
}
.card, .card-body, .card-text, .card-title, .card-footer {
background-color: $background_color !important;
//background-color: green !important;
font-family: 'Roboto', 'Open Sans' !important;
text-decoration: none !important;
border: none;
border-radius: 0;
}
section {
float: left;
width: 100%;
background: $background_color; /* fallback for old browsers */
padding: 30px 0;
}
//h1{float:left; width:100%; color:#232323; margin-bottom:30px; font-size: 14px;}
//h1 span{font-family: Roboto, serif; display:block; font-size:45px; text-transform:none; margin-bottom:20px; margin-top:30px; font-weight:700}
//h1 a{color:#131313; font-weight:bold;}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
-webkit-border-radius: 20%;
-moz-border-radius: 20%;
-webkit-box-shadow: #000 0 2px 10px;
-moz-box-shadow: #000 0 2px 10px;
padding: 8px;
box-shadow: 0px 0px 20px #b4b4b4;
border-top:none;
border-left:none;
border-right:solid 2px #dddddd;
border-bottom:solid 2px #dddddd;
}
.found_text {
background-color: #faff98;
}
.badge {
display: inline-block;
min-width: 10px;
padding: 4px 8px;
font-size: 12px;
font-weight: 700;
line-height: 1;
color: #fff;
text-align: center;
white-space: nowrap;
vertical-align: middle;
background-color: #777;
border-radius: 10px;
}
.img-preview-wrapper {
text-align: center !important;
border: none;
}
.news-preview-wrapper {
text-align: center !important;
border: none;
}
/// COMMON FLEX ELEMENTS BLOCK START
.block_splitting_left_23 {
display: flex;
justify-self: flex-start;
flex: 2 1 0;
font-weight: normal;
#if ($debug_mode) {
border: 6px dotted green;
}
}
.block_splitting_right_13 {
display: flex;
justify-self: flex-start;
flex: 1 1 0 ;
font-weight: normal;
color: #403941;
width: 100% !important;
#if ($debug_mode) {
border: 5px dotted red;
}
}
.block_splitting_left_half {
display: flex;
justify-self: flex-start;
flex: 1;
font-weight: normal;
#if ($debug_mode) {
border: 6px dotted yellow;
}
}
.block_splitting_right_half {
display: flex;
justify-self: flex-end;
flex: 1 ;
font-weight: normal;
color: #403941;
#if ($debug_mode) {
border: 5px dotted maroon;
}
}
.key_values_rows_label_half {
display: flex;
justify-self: flex-start;
flex: 1;
font-weight: normal;
#if ($debug_mode) {
border: 2px dotted green;
}
flex-wrap: nowrap;
white-space: nowrap;
}
.key_values_rows_value_half {
justify-self: flex-end;
flex: 1;
font-weight: normal;
color: #403941;
#if ($debug_mode) {
border: 2px dotted red;
}
}
.key_values_rows_label_13 {
display: flex;
justify-self: flex-start;
flex: 1 1 30px;
font-weight: normal;
#if ($debug_mode) {
border: 2px dotted green;
}
width: auto;
margin: 0;
padding: 0;
flex-wrap: nowrap;
white-space: nowrap;
}
.key_values_rows_value_13 {
justify-self: flex-end;
flex: 3 1;
font-weight: normal;
color: #403941;
margin: 0;
padding: 0;
#if ($debug_mode) {
border: 2px dotted red;
}
}
.space_between_wraping_cell {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.column_content_left_aligned {
#if ($debug_mode) {
border: 2px dotted blue;
}
display: flex;
flex: 1;
flex-direction: column;
justify-items: flex-start;
align-items: flex-start;
width: 100% !important;
}
.column_content_centered {
display: flex;
flex: 1;
flex-direction: column;
align-items: center;
}
.row_content {
display: flex;
flex-direction: row;
justify-content: flex-start;
//align-items: center;
//border: 2px dotted green;
}
.column_content {
display: flex;
flex: 1;
flex-direction: column;
justify-content: flex-start;
}
.row_content_centered {
display: flex !important;
flex-direction: row !important;
justify-content: space-around !important;
align-items: center;
#if ($debug_mode) {
border: 3px dotted red !important;
}
}
.row_content_right_aligned {
display: flex !important;
flex-direction: row !important;
justify-content: flex-end !important;
align-items: center;
border: 0px dotted green !important;
}
.key_values_rows {
display: flex;
flex-direction: row;
padding: 4px;
}
.key_values_rows_value {
justify-self: flex-end;
font-weight: normal;
color: #403941;
}
.key_values_rows_label {
display: flex;
justify-self: flex-start;
flex: 4;
font-weight: normal;
}
.bottom_split_border {
border-bottom: $border-separator-color !important;
}
.top_split_border {
border-top: $border-separator-color !important;
}
/// COMMON FLEX ELEMENTS BLOCK END
// DIFFERENT DEVICES BLOCK START
/* Big Media */
.block_2columns_md {
display: flex;
flex-direction: row;
padding: 0;
margin: 0;
#if ($debug_mode) {
border: 4px ridge blue !important;
}
width: 100%;
}
.block_2columns_sm {
display: flex;
flex-direction: row;
justify-content: space-around;
padding: 4px;
#if ($debug_mode) {
border: 3px solid red;
}
width: 100%;
}
img.lazy {
border: 4px dotted red !important;
background-color: yellow !important;
}
.lazy_image {
border: 4px dotted red !important;
background-color: yellow !important;
}
.vote_item {
#extend .bordered_item;
}
.single_vote_image_left_aligned {
//border: 1px dotted gray;
border: 2px dotted red;
padding: 2px;
margin: 5px;
height: auto;
}
.image_in_3_columns_list {
border: 1px dotted gray;
//border: 2px dotted green;
padding: 2px;
margin: 2px;
max-width: 280px;
height: auto;
}
.vote_item_selection_image {
border: 1px dotted gray;
padding: 2px;
margin: 5px;
}
/* Large ≥992px ipad pro */
#media only screen and (min-width: 1280px) { /* Extra large ≥ 1200px */
.single_vote_image_left_aligned {
max-width: 340px;
}
.image_in_3_columns_list {
max-width: 280px;
}
.img_full_width_wrapper {
max-width: 1080px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 1030px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.flexbox-parent {
padding-left: 280px !important;
padding-right: 280px !important;
}
.test-device {
background: url(/images/test-device/exlg.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 48px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 340px;
height: auto;
}
.vote_item_selection_image {
max-width: 380px;
height: auto;
}
} // #media only screen and (min-width: 1280px) { /* Extra large ≥ 1200px */
#media only screen and (min-width: 992px) and (max-width: 1280px) { /*lg*/
.single_vote_image_left_aligned {
max-width: 300px;
}
.image_in_3_columns_list {
max-width: 220px;
}
.img_full_width_wrapper {
max-width: 820px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 680px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.flexbox-parent {
padding-left: 120px !important;
padding-right: 120px !important;
}
.test-device {
background: url(/images/test-device/lg.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 32px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 300px;
height: auto;
}
.vote_item_selection_image {
max-width: 300px;
height: auto;
}
} // #media only screen and (min-width: 992px) and (max-width: 1280px) { /*lg*/
/* md : Medium ≥768px ipad or ipad mini */
#media only screen and (min-width: 768px) and (max-width: 991px) { /* Ipad Pro md */
.single_vote_image_left_aligned {
max-width: 200px;
}
.image_in_3_columns_list {
max-width: 200px;
}
.img_full_width_wrapper {
max-width: 600px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 580px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.v--modal {
top: 25px !important;
left: 25px !important;
width: 720px !important;
height: 960px !important;
}
.flexbox-parent {
padding-left: 50px !important;
padding-right: 50px !important;
}
.page_content_container {
padding: 12px;
}
.test-device {
background: url(/images/test-device/md.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 32px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 200px;
height: auto;
}
.vote_item_selection_image {
max-width: 180px;
height: auto;
}
} // #media only screen and (min-width: 768px) and (max-width: 991px) { /* md - Ipad Pro */
/* sm : Small ≥ 576px Nexus7 */
#media only screen and (min-width: 576px) and (max-width: 767px) { /* sm : Nexus 7 */
.single_vote_image_left_aligned {
max-width: 240px;
}
.image_in_3_columns_list {
max-width: 220px;
}
.img_full_width_wrapper {
max-width: 500px;
height: auto;
padding: 4px;
margin: 0;
}
.category_image {
max-width: 500px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.v--modal {
top: 20px !important;
left: 20px !important;
width: 560px !important;
height: 920px !important;
}
.flexbox-parent {
padding-left: 10px !important;
padding-right: 10px !important;
}
.page_content_container {
padding: 8px;
}
.block_2columns_md { /* sm */
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
#if ($debug_mode) {
border: 3px solid greenyellow;
}
width: 100%;
}
.test-device { /* xs600.png */
background: url(/images/test-device/sm.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 64px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 480px;
height: auto;
}
.vote_item_selection_image {
max-width: 400px;
height: auto;
}
} //#media only screen and (min-width: 576px) and (max-width: 767px) { /* sm : Nexus 7 */
/* xs : Extra small < 576px iphon5/SE */
#media only screen and (max-width: 575px) { /* iphon5/SE */
.single_vote_image_left_aligned {
max-width: 120px;
}
.image_in_3_columns_list {
max-width: 240px;
}
.task_image {
max-width: 100px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.category_image {
max-width: 280px;
height: auto;
padding: 1px;
border: $border-separator-color;
}
.img_full_width_wrapper {
max-width: 260px;
height: auto;
padding: 4px;
margin: 0;
}
.v--modal {
top: 10px !important;
left: 10px !important;
width: 300px !important;
height: 540px !important;
}
.flexbox-parent {
padding-left: 2px !important;
padding-right: 2px !important;
}
.page_content_container {
padding: 2px;
margin: auto;
}
.block_2columns_md { /* xs - iphon5/SE */
display: flex;
flex-direction: column;
padding: 0;
margin: 0;
#if ($debug_mode) {
border: 2px solid blue;
}
width: 100%;
}
.test-device {
background: url(/images/test-device/xs.png) center center no-repeat;
border: 1px dotted #2D27B6;
margin: 1px;
min-width: 64px;
height: 32px;
}
.banner_image {
border-radius: 20%;
border-style: outset;
border-corner-shape: bevel;
max-width: 250px;
height: auto;
}
.vote_item_selection_image {
max-width: 200px;
height: auto;
}
} //#media only screen and (max-width: 575px) { /* xs - iphon5/SE */
// DIFFERENT DEVICES BLOCK END
/// FLEX BUTTONS BLOCK START
.content_with_right_button {
display: flex;
flex-direction: row;
}
.content_with_right_button_left_content {
display: flex;
flex: 1 1;
#if ($debug_mode) {
border: 2px dotted green;
}
}
.content_with_right_button_right_button {
display: flex;
flex: 0 0 30px;
#if ($debug_mode) {
border: 2px dotted red;
}
align-items: center;
justify-content: center;
}
/// FLEX BUTTONS BLOCK END
/// FLEX BADGE BLOCK START
.badge_item_row {
flex: 1 0 2rem;
//background-color: lightpink;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
padding: 0;
margin: 0;
}
.badge_item_row_cell {
flex-wrap: wrap;
flex: 1 0;
align-content: center;
justify-content: space-around;
padding: 0;
#if ($debug_mode) {
border: 2px dotted red !important;
}
}
/// FLEX BADGE BLOCK START
/* FOOTER BLOCK START */
.context-dark, .bg-gray-dark, .bg-primary {
color: rgba(255, 255, 255, 0.8);
}
.footer-classic a, .footer-classic a:focus, .footer-classic a:active {
color: #0b0b0b;
}
.nav-list li {
padding-top: 5px;
padding-bottom: 5px;
}
.nav-list li a:hover:before {
margin-left: 0;
opacity: 1;
visibility: visible;
}
ul, ol {
list-style: none;
padding: 0;
margin: 0;
}
.menu-item {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 5px 0 5px 0 !important;
margin: 0 !important;
color: white;
background-color: #2D3246 !important;
}
footer {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
.menu-items-container {
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0 !important;
margin: 0 !important;
background-color: #2D3246 !important;
}
.nav-list li a:before {
content: "\f14f";
font: 400 21px/1 "Material Design Icons";
//color: #4d6de6;
display: inline-block;
vertical-align: baseline;
margin-left: -28px;
margin-right: 7px;
opacity: 0;
visibility: hidden;
transition: .22s ease;
}
.app_title_icon_selected_dashboard {
color: transparent;
background-color: white;
margin-right: 5px;
}
.app_title_icon_warning {
color: red;
background-color: yellow ;
margin-right: 5px;
}
.app_title_icon {
color: $text-color;
background-color: transparent;
margin-right: 5px;
}
/* FOOTER BLOCK END */
/* breadcrumb BLOCK START */
.breadcrumb {
margin: 0px;
padding: 0px;
//border: 0px dotted green;
}
.breadcrumb-item {
//background-color: darkgrey;
}
.breadcrumb-item.active {
}
/* breadcrumb BLOCK END */
/* COMPONENTS BLOCK START */
.taggable-votes-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
flex: 1 !important;
flex-direction: column !important;
align-items: flex-start !important;
#extend .bordered_block
}
.active-vote-categories-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
flex: 1 !important;
flex-direction: column !important;
align-items: flex-start !important;
#extend .bordered_block
}
.most-rating-quiz-quality-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
#extend .bordered_block
//border: 2px dotted blue !important;
}
.active-banners-block {
width: 100% !important;
padding: 12px !important;
margin: 0 !important;
#extend .bordered_block
//border: 2px dotted blue !important;
}
.block-selection {
//z-index: 1;
border: 4px ridge #fffffe;
padding: 0;
margin: 0;
//background-color: yellow;
}
/* COMPONENTS BLOCK END */
Any ideas how to optimize it ?
Thanks!
You could try with this solution to keep tidy your sass code and
almost parallel to the structure of your blades .
sass/
|
|– general/
|– |- parts/
| |– _reset.scss // Reset Style
| |– _typography.scss // Import fonts and define property
| |– _variables.scss // Define scss variables
| |
| |- _general.scss // Import all the general parts
|
|– layout/
| |- parts/
| |– _navigations.scss // Navigation
| |– _header.scss // Header
| |– _footer.scss // Footer
| |– _sidebar.scss // Sidebar
| |
| |– _layouts.scss // Import all the layout parts
|
|– fontend/
| |- page/
| |– parts/ // Page sections
| |– _page.scss // Import all the page sections
| |
| |– _frontend.scss // Import _page.scss
|
|– admin/
| |- page/
| |– parts/ // Page sections
| |– _page.scss // Import all the page sections
| |
| |– _admin.scss // Import _page.scss
|
|
`– main.scss // Import _general.scss,_layout.scss, ..., ...,
- vendors.scss // Import Bootstrap,Fontawesome, ..., ...,
Pay attention to import the files in the correct order!
Little Extra:
In Laravel I've got used to compile vendors.scss as a separate file once I started the project to avoid that npm run watch compile (bootstrap, fontawesome, etc.) at every save (Don't forget to add the vendors.css public path to the head of your documents and when you go to production to minify it with npm run production).
My webpack.mix.js looks like:
const mix = require("laravel-mix");
mix.js('resources/js/app.js', 'public/js');
mix.sass("resources/sass/app.scss", "public/css");
// Uncomment the next line to compile vendors scss
//mix.sass("resources/sass/vendors.scss", "public/css");

product description overlap with image in magento in chrome browser :www.swadihandicrafts.com [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
my website url is:www.swadihandicrafts.com.when ever open in chrome browser product description overlaping with image.i'm tried lot.but i'm not able to solve that.please give any solution for that.thanks in advance.
<?php
/**
* Magento
*
* NOTICE OF LICENSE
*
* This source file is subject to the Academic Free License (AFL 3.0)
* that is bundled with this package in the file LICENSE_AFL.txt.
* It is also available through the world-wide-web at this URL:
* http://opensource.org/licenses/afl-3.0.php
* If you did not receive a copy of the license and are unable to
* obtain it through the world-wide-web, please send an email
* to license#magentocommerce.com so we can send you a copy immediately.
*
* DISCLAIMER
*
* Do not edit or add to this file if you wish to upgrade Magento to newer
* versions in the future. If you wish to customize Magento for your
* needs please refer to http://www.magentocommerce.com for more information.
*
* #category design
* #package base_default
* #copyright Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com)
* #license http://opensource.org/licenses/afl-3.0.php Academic Free License (AFL 3.0)
*/
/**
* Product description template
*
* #see Mage_Catalog_Block_Product_View_Description
*/
?>
<?php $_description = $this->getProduct()->getDescription(); ?>
<?php if ($_description): ?>
<h2><?php echo $this->__('Details') ?></h2>
<div class="std">
<?php echo
$this->helper('catalog/output')->productAttribute($this->getProduct(), $_description, 'description') ?>
</div>
<?php endif; ?>
style.css
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, strong, ol, ul, li, table, tr, th, td, form { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; }
table { border-collapse: collapse; border-spacing: 0; }
input, button{ overflow: visible; }
html, body { height: 100%; min-height: 100%; }
body { font: normal 11px/14px tahoma, arial, verdana, sans-serif; text-align:center; color: #333; background: #f6f6f6; }
p { padding: 0 0 10px; }
ul { padding: 0 0 0 16px; }
li { padding: 0 0 8px; }
a { text-decoration: none; }
a:link, a:visited { color: #1d64c1; }
a:hover, a:active { color: #6687dd; text-decoration: underline; }
.clear, .box .content { display: inline-block; }
.clear:after, .box .content:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clear, * html .box .content { height: 1%; }
.clear, .box .content { display: block; }
.none, .hidden { display: none; }
.page { position: relative; width: 100%; min-width: 750px; min-height: 100%; }
* html .page { height: 100%; }
.page .header { width: 100%; height: 53px; text-align: left; background: #363b47 url('../img/common/top_bg.png') 0 0 repeat-x; }
.page .header .company-logo { float: right; display: block; margin: 9px 20px 0 10px; width: 100px; height: 31px; overflow: hidden; text-indent: -9999px; background: url(../img/common/top-company-logo.gif) no-repeat; }
.page .header .header-area { height: 53px; }
.page .header h1 { float: left; width: 210px; height: 50px; text-align: left; }
.page .header h1 a { display: block; margin: 0 0 0 10px; width: 210px; height: 50px; overflow: hidden; text-indent: -9999px; background: url(../img/common/def_plesk_logo.gif) no-repeat; }
.page .header .header-text { float: right; font-size: 11px; }
.page .header .header-text a { float: left; margin: 11px 13px 0 0; color: #506cc6; text-decoration: none; font-size: 11px; }
.page .header .header-text a.txt-banner { margin-right: 10px; }
.page .header .header-text a strong { font-weight: normal; }
.page .header .header-text a.top-copyright { text-align: right; }
.wrapper { margin: 0 auto; padding: 24px 0 50px; width: 734px; text-align: left; }
#body { margin: 0 auto; padding: 24px 0 57px 0; width: 734px; text-align:left; }
.box { position: relative; background: #fff; border: 1px solid #c0c0c0; width:100%; }
.box .content { padding: 10px; position: relative; }
.box em { display: block; width: 11px; height: 11px; position: absolute; background: url('../img/common/box-corners.png') no-repeat; overflow: hidden; }
.box em.tl { background-position: 0 0; left:-1px; top:-1px;}
.box em.tr { background-position: -29px 0; right:-1px; top:-1px;}
.box em.bl { background-position: 0 -29px; left:-1px; bottom:-1px;}
.box em.br { background-position: -29px -29px; right:-1px; bottom:-1px;}
.globe { float: left; background: url('../img/common/globe.png') 0 0 no-repeat; width: 167px; height: 198px; margin: 0; }
.welcome { padding: 0 0 0 187px; }
h2 { margin: 5px 0 10px; padding: 10px 0 3px; font-size: 18px; font-weight: normal; color: #000; }
h3 { margin: 10px 0 5px 0; }
.hr { border-top: 1px solid #e0e0e0; margin-top: 5px; padding: 10px 0 0; overflow:hidden; }
.center { text-align: center; }
.products { width: 390px; float: right; }
.new-to-parallels { width: 330px; float: left; }
.column { width: 180px; }
.column.left { float: left; }
.column.right { float: right; }
.column strong { display: block; margin-bottom: 11px; }
.column p { display: block; margin-top: 15px; font-size: 10px; }
.column img { float:left; margin-right: 15px; width: 69px; }
.page .footer { position: absolute; left: 0; bottom: 0; border-top: 1px solid #c0c7fc; width: 100%; min-width: 300px; height: 38px; background: #d9e9ff url('../img/common/footer_bg.png') 0 0 repeat-x; }
.page .footer-area { height: 38px; font-size: 11px; text-align: left; color: #000; }
.page .footer .description { margin: 0; padding: 12px 10px 0; }
.icons-area { padding: 5px 10px 10px; text-align: center; background: url('../img/common/blocks_bg.png') 0 100% no-repeat; }
.icon { display: -moz-inline-box; display: inline-block; margin: 0 3px 12px 0; padding: 0; min-height: 32px; font: normal 11px/13px tahoma, arial, helvetica, sans-serif; text-decoration: none; text-align: left; vertical-align: top; color: #000; cursor: pointer; background-position: 50% 0; background-repeat: no-repeat; }
a.icon:link, a.icon:visited, a.icon:hover, a.icon:active { color: #000; text-decoration: none; }
.icon span { display: block; padding: 34px 0 0; width: 80px; text-align: center; cursor: pointer; }
#asp { background-image: url('../img/glyph/btn_asp_bg.gif'); }
#aspnet { background-image: url('../img/glyph/btn_aspdotnet_bg.gif'); }
#coldfusion { background-image: url('../img/glyph/btn_coldfusion_bg.gif'); }
#perl { background-image: url('../img/glyph/btn_perl_bg.gif'); }
#php { background-image: url('../img/glyph/btn_php_bg.gif'); }
#python { background-image: url('../img/glyph/btn_python_bg.gif'); }
#ssi { background-image: url('../img/glyph/btn_ssi_bg.gif'); }
#fcgi { background-image: url('../img/glyph/btn_fast_cgi_bg.gif'); }
#miva { background-image: url('../img/glyph/btn_miva_bg.gif'); }
.test { width: 680px; }
.test .pathbar { color: #7b7b7b; }
.test .pathbar a { text-decoration: underline; color: #7b7b7b; }
.test .pathbar a:hover { color: #39f; }
.test h2 { margin: 10px 0; font-size: 17px; font-weight: normal; }
.test .tab-content { border: 1px solid #a0b0e9; padding: 10px; background: #fff; }
iframe { border: 1px solid #a0b0e9; }
fieldset { border: 1px solid #e0e0e0; margin: 0; padding: 0 10px 10px; }
legend { margin: 0; padding: 0 2px 5px; vertical-align: middle; font-weight: bold; color: #000; }
.form-fields { padding-top: 6px; }
.formFields { margin: 5px 0; }
.formFields, .formFields input, .formFields select, .formFields textarea { font: normal 11px 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif; }
.formFields td.name { padding: 0 10px 10px 0; width: 200px; vertical-align: top; font-weight: bold; }
.buttonsContainer { margin-top: 10px; text-align: right; }
.buttonsContainer .commonButton { display: inline; margin-left: 14px; }
.buttonsContainer .commonButton span { display: none; }
.buttonsContainer .commonButton button { border: 0; width: 91px; height: 21px; text-align: center; white-space: nowrap; cursor: pointer; font: normal 11px 'Segoe UI', Tahoma, Verdana, Arial, Helvetica, sans-serif; background: transparent url('../img/glyph/btn_bg.gif') 0 0 no-repeat; }
.commonButton button[disabled] { color: #999; background-image: url('../img/glyph/btn_bg-disabled.gif'); }
#bid-ok button { padding-left: 8px; background-image: url('../img/glyph/btn_ok_bg.gif'); }
.commonButton button:hover { background-position: 0 -21px; }
.commonButton button[disabled]:hover { background-position: 0 0; }
.testRelults#testFailed { border: 1px solid #ccc; margin: 0 0 10px; padding: 10px 10px 10px 32px; background: #fde9e5 url('../img/icons/fail.gif') 10px 11px no-repeat; }
.testRelults#testSuccessful { border: 1px solid #ccc; margin: 0 0 10px; padding: 10px 32px; background: #bff7b4 url('../img/icons/success.gif') 10px 11px no-repeat; }
.testResult { font-weight: bold; }
.test-data { text-align: left; background: #fff; }
.test-data table { border-collapse: collapse; margin-bottom: 10px; width: 100%; color: #000; background-color: white; }
.test-data table th, .test-data table td { padding: 4px 6px; }
.test-data tr.subhead { background-color: #e8f4fe; }
.test-data tr.subhead th { border-bottom: 1px solid #b1c1f9; background: #e8f4fe url('../img/common/th-na-bg.gif') 0 0 repeat-x; }
.test-data th.alt { border-top: 1px solid #b1c1f9; border-bottom: 1px solid #b1c1f9; color: #000; background-color: #dbebff; }
.test-data tr.alt { background-color: #ebf4ff; }
The problem appears when applying clear on the wrapper element. When you remove the clear, the bug goes away.
According to the W3C specs regarding the clear property:
This property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

Resources