I want the background to be white from 768 pixels, but it becomes white already at 353 pixels wide
Plus, the logos don't work.
.container{
width: 280px;
padding: 0 20px;
}
#media (min-width: 768px){
.container{
width: 620px;
padding: 0 20px;
background-color: #fff;
}
.logo__phone{
display: block;
}
.logo__desktope{
display: none;
}
}
.logo__desktope, .menu__list{
display: none
}
screen
Related
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.
i already see the answers to similar problems with mine tried the solutions and nothing worked.
so i have an image categories flexbox with 7 images per row when it resizes to mobile display it goes to 3 per row. everything works fine in all browsers except safari that sticks to 3 in row no matter the screen size
here is the css:
`.wrapper {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
margin-top: 50px;
margin-bottom: 30px;
}
.responsive-image {
max-width: 100%;
}
.responsive-images {
max-width: 100%;
}
.box img {
display: block;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1
}
.box {
max-width: calc(100% / 7);
border: 4px solid white;
height: 100%;
}`
`#media screen and (max-width: 700px) {
.box {
max-width: calc(100% / 3);
}
}`
where box is the cell
I am trying to make an application that is responsive to a full screen computer size and portrait and landscape sizing on a phone. I can get the full screen and portrait sizing to work, but when I switch to landscape, the landscape css media query does not work. Any ideas on what is going on? Here is my css:
#media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait)and (-webkit-min-device-pixel-ratio: 2) {
.landing-header {
margin-top: 18%;
}
.landing-h {
font-size: 145px;
}
.auth-box {
position: absolute;
top: 58%;
left: 35%;
margin-left: -15rem;
margin-top: -26.5rem;
width: 60rem;
height: 80rem;
overflow: hidden;
}
.user-auth {
padding-top: 35%;
}
.greeting {
margin-top: 6%;
margin-left: 7%;
font-size: 35px;
text-align: center;
}
.login-form, .register-form {
font-size: 40px;
}
.login-form input, .register-form input {
margin: 3%;
}
.landing-button {
margin: 2%;
width: 50%;
font-size: 60px;
}
}
#media only screen and (min-device-width: 667px) and (max-device-width: 667px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 2) {
.landing-header {
margin-top: 9%;
}
.auth-box {
position: absolute;
top: 98%;
left: 35%;
margin-left: -22rem;
margin-top: -26.5rem;
width: 72rem;
height: 20rem;
overflow: hidden;
}
.greeting {
margin-left: 34%;
margin-top: 2%;
margin-bottom: 1%;
font-size: 16px;
text-align: center;
}
}
.user-auth {
padding-top: 9%;
}
.landing-button {
margin: 0%;
width: 12%;
font-size: 16px;
}
.login-form, .register-form {
font-size: 18px;
}
.login-form input, .register-form input {
margin: 2%;
}
#media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
.auth-box {
width: 61rem;
height: 18rem;
top: 95%;
left: 40%;
height: 23rem;
}
.landing-button {
font-size: 20px;
width: 18%;
margin: 1%;
}
.greeting {
margin-left: 30%;
margin-top: 2%;
}
.login-form input, .register-form input {
margin-top: 6%;
margin-bottom: 1%;
}
}
OK, I think I see what's biting you. In addition to the max and min being the same as I'd pointed out in the comments, somewhat counter-intuitively you need to use the same width & height values for both portrait and landscape modes. So, a device like the iPhone is always going to have a smaller value for its device width than its device height as its "native" orientation is portrait. If you make your width media query for the landscape mode match what you've got for portrait, it'll likely do what you want.
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
I have checked possibilities and issues with frameworks. Bootstrap has additional code and some code need to be modified.
I enclose my code CSS and I kindly ask you to check and inform me if this is correct, specially position elements.
.carousel {
height: 250px;
margin-bottom: 20px;
margin-top: 10px;
}
.carousel-caption {
z-index: 20;
}
.carousel-caption {
left: 10%;
padding-bottom: 30px;
right: 10%;
}
.carousel .item {
height: 250px;
}
.carousel-inner > .item > img {
height: 250px;
left: 0;
min-width: 100%;
position: relative;
top: 0;
}
.carousel-control {
width: 5%;
}
.carousel-control.left, .carousel-control.right {
display: block;
float: left;
height: 250px;
width: 5%;
}
.carousel-control.left {
background: url("../images/left1.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.carousel-control.right {
background: url("../images/right1.png") no-repeat scroll center center rgba(0, 0, 0, 0);
}
.carousel-indicators {
bottom: 10px;
left: 40%;
list-style: none outside none;
margin-left: -20%;
padding-left: 0;
position: absolute;
text-align: center;
width: 50%;
z-index: 15;
}