In prestashop 1.7 moble menu is active from 768 screen size . I need to change this size to 991 . How to change this ? Also there is anyway to know viewport size in tpl.
You can use this piece of css if you are using bootstrap.css
#media (min-width: 768px) and (max-width: 991px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
/*margin: 7.5px -15px;*/
margin: 7.5px 50px 7.5px -15px
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block!important;
}
.collapsing {
overflow: hidden!important;
}
}
Edit your /prestashop/themes/[theme]/assets/js/theme.js file.
Search for 768 or default.responsive.min_width and replace the numeric value with your pixel value.
Related
So basically I've done my best to style the datepicker for my project.
My last hurdle is to style the last days of the month if they're in range of the selection to be all curvy like all the other days at the start and end of a week.
Can anyone please help with this problem? Any sort of help is highly appreciated thank you.
This is my stylesheet.
.wpm-datepicker {
font-weight: 600;
box-shadow: none;
background-color: transparent;
font-family: "Inter", sans-serif;
width: 100%;
.bs-datepicker-multiple {
margin: 0 0 10px;
border-radius: 8px;
box-shadow: $color-light-blue-grey 0 6px 13px;
flex-basis: 50%;
&:first-of-type {
margin-right: 20px;
}
&:nth-of-type(2) {
margin-left: 20px;
}
}
.bs-datepicker-container {
padding: 0;
width: 100%;
}
.bs-datepicker-head {
background-color: #0f2332 !important;
border-radius: 8px 8px 0 0;
padding: 17px 10px;
height: auto;
&::after {
content: unset;
}
button:nth-of-type(1) span,
button:nth-of-type(4) span {
color: transparent;
left: -12px;
top: 10.5px;
display: inline-block;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
width: 10px;
height: 10px;
border-radius: 1px;
}
button:nth-of-type(1) span {
transform: rotate(135deg);
}
button:nth-of-type(4) span {
transform: rotate(-45deg);
}
}
.bs-datepicker-body {
border-radius: 0 0 8px 8px;
border: 0.1px solid #e5e5e5;
padding: 19px;
table th {
color: #970202 !important;
font-weight: 600;
text-transform: uppercase;
padding: 14px 0;
}
table th:first-of-type,
table td:first-of-type {
display: none;
}
table td {
color: #0f2332 !important;
}
table td span .is-other-month {
color: #aab9c3 !important;
}
table.days span {
line-height: 31px;
font-size: 14px;
}
table.days span.in-range:not(.select-start)::before {
background: #ffcaca !important;
right: 19px;
height: 24px;
top: 4px;
}
table td::before,
table td span::before {
left: -20px !important;
}
table td span.selected,
table td.selected span,
table td span[class*="select-"]::after,
table td[class*="select-"] span::after,
table td.is-highlighted:not(.disabled):not(.selected) span,
table td span.is-highlighted:not(.disabled):not(.selected) {
background-color: #ffcaca;
width: 24px;
height: 24px;
line-height: 24px;
}
table td span.is-other-month,
table td.is-other-month span {
background-color: transparent !important;
}
table td span.selected,
table td.selected span,
table td span[class*="select-"]::after,
table td[class*="select-"] span::after {
background: #e60000 !important;
}
table td:nth-of-type(2) span::before {
border-radius: 16px 0 0 16px;
left: 8px !important;
}
table td:nth-of-type(8) span::before {
border-radius: 0 16px 16px 0;
right: 4px !important;
}
table td:nth-of-type(8) span.select-end::before {
right: 10px !important;
}
table.days span.in-range.select-end::before {
right: 20px;
}
}
bs-days-calendar-view {
&:nth-of-type(1) bs-datepicker-navigation-view {
display: flex;
button {
padding: 0 4px;
font-size: 14px;
&:nth-of-type(1) {
padding-left: 24px;
padding-right: 10px;
}
&:nth-of-type(1) span {
bottom: 2px;
}
&:nth-of-type(3) {
padding: 0;
}
}
}
&:nth-of-type(2) bs-datepicker-navigation-view {
display: flex;
justify-content: flex-end;
button {
padding: 0 4px;
font-size: 14px;
&:nth-of-type(3) {
padding: 0;
}
&:nth-of-type(4) {
padding-left: 30px;
padding-right: 10px;
}
&:nth-of-type(4) span {
bottom: 2px;
}
}
}
}
}
My component has this for the bsConfig
this.bsConfig = {
containerClass: "wpm-datepicker",
};
And this how I have it for my markup.
<bs-daterangepicker-inline
[bsConfig]="bsConfig"
[bsValue]="bsRangeValue"
></bs-daterangepicker-inline>
I tried following advice about this issue from other chat rooms but with no luck. I am using Unbounce and I copied all codes from one old landing page to a new one. Everything works except the arrows are not visible (yet they are clickable, they work).
All I managed to do so far was removing the frame around the arrows.
Any idea what could be wrong?
Link to the new LP
Link to the old LP with working Flexslider
<style>
a {
text-decoration: none !important;
}
/*Testimonials slider*/
.testimonial-container {
background-color: transparent;
width: 100%;
}
.cd-testimonials-wrapper {
position: relative;
width: 100%;
max-width: 100%;
margin: 0 auto;
background-color: transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 25px 0px 40px 0;
z-index: 1;
}
.testimonial-content {
max-width: 1000px;
width: 80%;
margin: 0 auto 30px auto;
}
.cd-testimonials {
color: rgba(130, 132, 139, 1);
text-align: center;
list-style: none;
padding: 0;
margin: 0;
}
.cd-testimonials > li {
position: absolute;
opacity: 0;
font-family: 'Fira Sans', sans-serif;
}
.cd-testimonials > li:first-child {
position: relative;
opacity: 1;
}
.testimonial-content p {
font-style: italic;
line-height: 1.4;
margin-bottom: 30px;
padding: 0 14px;
font-size: 19px;
color: #284A6A;
}
.cd-author .cd-author-info {
display: inline-block;
vertical-align: top;
color: #0058A9;
font-size: 16px;
font-weight: 500;
text-align: center;
line-height: 1
}
ul.cd-author-info {
list-style: none;
}
ul.cd-author-info li span {
font-size: 14px;
line-height: 32px;
font-style: italic;
font-weight: 300;
color: #9c9c9c;
}
.flex-direction-nav a {
text-decoration: none;
display: block;
width: 50px;
height: 100%;
margin: 0px 0 0;
position: absolute;
z-index: 9999;
top: 0;
opacity: 1;
background: transparent;
cursor: default;
color: transparent;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.flex-direction-nav a:before {
font-size: 52px;
font-family: Arial;
content: "\f053";
position: absolute;
display: block;
top: 50%;
cursor: pointer;
color: transparent;
padding: 14px 10px 14px 10px;
}
.flex-direction-nav a.flex-next:before {
content: "\f054";
padding: 14px 20px 14px 10px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
.flexslider:hover .flex-direction-nav .flex-next:hover {
opacity: 1;
}
.flex-direction-nav .flex-disabled {
opacity: 0!important;
filter: alpha(opacity=0);
cursor: default;
}
.flex-control-paging li a {
width: 6px;
height: 6px;
display: block;
background: #666;
background: rgba(0, 0, 0, 0.4);
cursor: pointer;
text-indent: -9999px;
-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.flex-control-paging li a:hover {
background: #333;
background: rgba(0, 0, 0, 0.7);
}
.flex-control-paging li a.flex-active {
background: #000;
background: rgba(2, 23, 31, 1);
cursor: default;
}
.flex-control-nav {
bottom: 30px;
position: absolute;
margin: 0 auto;
padding: 0;
text-align: center;
width: 100%;
}
.flex-control-nav li {
display: inline-block;
padding: 0px 5px 0px 5px;
}
/*Footer icons custom style*/
.footer-icons {
text-align: left;
}
.footer-icons a {
margin-right: 10px;
color: #fff;
}
#media screen and (max-width: 767px) {
.cd-author .cd-author-info {
line-height: 1.4;
}
.cd-author .cd-author-info {
font-size: 16px;
}
.testimonial-content p {
font-size: 16px;
}
.flex-direction-nav a {
width: 30px;
}
.flex-direction-nav a:before {
font-size: 30px;
}
.flex-direction-nav a:before {
padding: 14px 0px 10px 0px;
}
.flex-direction-nav .flex-prev {
left: 0px;
}
.flex-direction-nav .flex-next {
right: 0px;
text-align: right;
}
.flexslider:hover .flex-direction-nav .flex-prev {
opacity: 1;
left: 0px;
}
.flexslider:hover .flex-direction-nav .flex-prev:hover {
opacity: 1;
}
.flexslider:hover .flex-direction-nav .flex-next {
opacity: 1;
right: 0px;
}
}
</style>
You lose Font Awesome css, which is required as the nav arrow.
add
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
to <head> section. (Just as the working page does, check it's source code line 2825). Good luck.
I want to change arrow color as well as circle when click on it. I am using LESS and getting right place to add border-top-color: #0066ff; Can anyone suggest please? Here is code:
LESS:
.circle {
border-radius: 50%;
box-sizing: border-box;
width: 225px;
height:225px;
border: 6px solid #ff6600;
border-radius: 50%;
position: relative;
cursor:pointer;
&.selected {
border: 6px solid #0066ff;
}
&:after {
top: 104%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-top-color: #ff6600;
border-width: 10px;
margin-left: -10px;
transform: scaleY(1.6);
&.selected {
border-top-color: #0066ff;
}
}
}
HTML:
<div class="circle"></div>
JS:
$(document).ready(function(){
$('.circle').on('click', function(){
$(this).addClass('selected');
});
});
JS fiddle is here:
https://jsfiddle.net/kunjsharma/6eu431hp/1/
You need to put :after inside .selected: see this fiddle
.circle {
border-radius: 50%;
box-sizing: border-box;
width: 225px;
height:225px;
border: 6px solid #ff6600;
border-radius: 50%;
position: relative;
cursor:pointer;
&.selected {
border: 6px solid #0066ff;
&:after { // <-- moved this inside .selected
border-top-color: #0066ff;
}
}
// rest of the styles...
}
I am trying to put the divs side by side with flexbox, but on safari for mac is not working.
Chrome, Firefox, Edge and Internet Explorer 11 it is working.
Someone can help me? hehe
all browsers
safari
It looks like the white block has box-sizing: content-box, but it does not have...
Does anyone know why?
The code: fiddle
.flex {
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.box-full {
width: 100%;
border-radius: 3px;
background-color: #fff;
box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
margin-bottom: 34px;
}
.box-fridge {
&:last-of-type {
margin-bottom: 40px;
}
.block-left {
padding: 21px 22px;
flex-grow: 2;
}
.block-right {
border-radius: 0 3px 3px 0;
background-color: #4681A8;
max-width: 190px;
flex-grow: 1;
}
.title-fridge {
font-size: 24px;
font-weight: 500;
line-height: 29px;
}
.desc {
font-size: 12px;
font-weight: 300;
line-height: 15px;
margin-top: 17px;
}
.block {
align-self: center;
color: #fff;
flex: 1 1 auto;
}
.price {
font-size: 24px;
line-height: 29px;
}
.period {
font-size: 10px;
line-height: 12px;
margin-top: 6px;
text-transform: uppercase;
}
}
heres the code. it seems to be working on this editor on stackoverflow...but when rendered on ie10 it take the palceholder image and stretches it (almost as if it were 200% in height and 100% in width
<style>
section`enter code here` {
padding: 1em;
text-align: center;
}
.content {
margin: 0 auto;
max-width: 1000px;
}
.content > h2 {
clear: both;
margin: 0;
padding: 4em 1% 0;
color: #484B54;
font-weight: 800;
font-size: 1.5em;
}
.content > h2:first-child {
padding-top: 0em;
}
.grid {
position: relative;
margin: 0 auto;
padding: 1em 0 4em;
max-width: 1100px;
list-style: none;
text-align: center;
}
/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
min-width: 310px;
max-width: 310px;
max-height: 310px;
width: 48%;
background: #d30c55;
text-align: center;
}
.grid figure img {
position: relative;
display: block;
height: 100%;
width:auto;
max-height: 100%;
max-width: 100%;
opacity: 1;
}
.grid figure figcaption {
padding: 0em 2em 2em 2em;
color: #ffffff;
text-transform: uppercase;
font-size: 1.25em;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}
.grid figure figcaption,
.grid figure figcaption > a {
position:absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Anchor will cover the whole item by default */
/* For some effects it will show as a button */
.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}
.grid figure h2 {
word-spacing: -0.15em;
font-weight: 200;
}
.grid figure h2 span {
font-weight: 400;
}
.grid figure h2,
.grid figure p {
margin: 0;
}
.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}
/*---------------*/
/***** transition *****/
/*---------------*/
figure.effect-transition {
background-color: #a39d99;
}
figure.effect-transition img {
/* opacity: 0.7; */
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition:hover img {
opacity: 0.1;
-webkit-transform: scale(1);
transform: scale(1);
}
figure.effect-transition h2 {
margin-top: 80%;
-webkit-transition: -webkit-transform 0.35s;
transition: transform 0.35s;
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
}
figure.effect-transition p {
margin: 1em 0 0;
padding: 0.6em;
border: 1px solid #fff;
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: translate3d(0,20px,0) scale(1.1);
transform: translate3d(0,20px,0) scale(1.1);
}
figure.effect-transition:hover h2 {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,-170px,0);
}
figure.effect-transition:hover p {
opacity: 1;
-webkit-transform: translate3d(0,0,0) scale(1);
transform: translate3d(0,-30px,0) scale(1);
}
#media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}
.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 100%;
}
}
</style>
<div class="container">
<div class="content">
<div class="grid">
<figure class="effect-transition" style="background-color: #d40e8c;"><img alt="blabla" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=310%C3%97310&w=310&h=310" /> <figcaption>
<h2>Go back <span>home</span></h2>
<p>Some random text here</p>
View more</figcaption></figure>
</div>
</div>
</div>
(I do not have the code on me at this exact moment to show).
I've built something with HTML5 and CSS3. Everything works wonderfully except on some peoples computers (everyone has IE10), the image files are being stretched vertically ?
This is being built for my company (internal)...Is there a reason why this would happen on only some peoples version of IE10?
Thank you,
Nick
Please Check with the css as shown below,
img.someClass{
max-width:100%;
width:auto
}
What did the trick for me was setting a max-width at something like
max-width: 110px;
and afterwards a width:100%;
images were nog not stretched anymore
UPDATE: nvm, this caused the img to have a width of 0 on Firefox