I have a mobile view issue on bootstrap wherein the texts overlap the next section
The smallest media query I have is 768px and the screen that I'm checking is from an iPhone XS Max
#media screen and (min-width: 768px){
.services .carousel-inner p{
margin-top: 110px;
}
#media screen and (min-width: 960px){
.services .carousel-item p{
text-align: center;
margin-top: 120px;
}
#media screen and (min-width: 992px){
.services .carousel-item p{
width: 60%;
}
#media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){
.services .carousel-item p{
margin-top: 105px;
font-size: 1.1em;
}
#media
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi), (max-resolution: 125dpi){
.services .carousel-item p{
width: 100%;
font-size: 1.1rem;
}
What can I improve on to fix my issue?
.services{
height: 100%;
padding: 5;
}
.services .carousel-inner{
height: 100%;
}
Related
I get a strange behaviour in IE (11) and Edge (25) with a line showing on top of pseudo elements (before and after) in a div. On the left is what it is supposed to look like (and does so in Chrome and Firefox), on the right you have IE and Edge:
Note: This only occurs on "not full" resolutions. So, any resolution wider than 1300px is not containing that border.
EDIT: I narrowed it down to the transform. The line only appears with a skewed element.
I have the following html structure:
<div class="col-xs-12 col-md-3 rightcontent">
<div class="halfcolumn hcblue">
<div class="hchlwrapper">
<div class="hcheadline">NEWS</div>
</div>
...
</div>
</div>
The stylings are the following (scss):
/* Colors */
$red: #FF0000;
$green: #00FF22;
$yellow: #FFF700;
$black: #000000;
$blackrgba: rgba(0,0,0,0.5);
$grey: #D7D7D7;
$greydark: #808080;
$lightgrey:#EcEBEB;
$white: #FFFFFF;
$bluelight: #6882B5;
$darkblue: #003399;
$ikbblue: #003399;
$ikbgreen: #B2D84C;
/* Heights, widths */
$full-width: 1300px;
$large-width: 1200px;
$desktop-width: 992px;
$medium-width: 768px;
$small-width: 576px;
$min-width: 320px;
.halfcolumn{
padding-right: 25px;
padding-bottom: 25px;
overflow: hidden;
.hcheadline{
font-weight: bold;
text-align: center;
padding: 15px 0 15px 0px;
color: $ikbgreen;
overflow: hidden;
#media (min-width: $full-width){
font-size: 30px;
margin-right: 40px;
}
#media (min-width: $large-width) and (max-width: 1299px){
font-size: 30px;
margin-right: 20px;
}
#media (min-width: $desktop-width) and (max-width: 1199px){
font-size: 22px;
margin-right: 20px;
}
#media (min-width: $medium-width) and (max-width: 991px){
font-size: 15px;
margin-right: 8px;
}
#media (min-width: 468px) and (max-width: 767px){
font-size: 22px;
margin-right: 130px;
}
#media (min-width: 380px) and (max-width: 467px){
font-size: 14px;
margin-right: 90px;
}
#media (max-width: 379px){
font-size: 14px;
margin-right: 60px;
}
}
.hchlwrapper{
position: relative;
z-index: 1;
overflow: hidden;
}
.hchlwrapper:before{
content: '';
position: absolute;
background-color: $white;
width: 100%;
height: 100%;
left: -10%;
top: 0px;
-webkit-transform: skew(-20deg,0deg);
-moz-transform: skew(-20deg,0deg);
transform: skew(-20deg,0deg);
z-index: -1;
#media (min-width: $desktop-width) and (max-width: 1199px){
left: -11%;
}
#media (min-width: $medium-width) and (max-width: 991px){
left: -13%;
}
#media (min-width: 468px) and (max-width: 767px){
left: -7%;
}
#media (min-width: 370px) and (max-width: 467px){
left: -8%;
}
#media (max-width: 369px){
left: -9%;
}
}
.hchlwrapper:after{
content: '';
position: absolute;
background-color: $white;
left: 88%;
width: 9%;
height: 35%;
top: 0%;
z-index: -1;
-webkit-transform: skew(-20deg,0deg);
-moz-transform: skew(-20deg,0deg);
transform: skew(-20deg,0deg);
}
.hccontent{
padding-left: 25px;
}
}
.hcblue{
background-color: $ikbblue;
color: $white;
}
.hcgreen{
background-color: $ikbgreen;
color: $white;
}
.hcgray{
background-color: $greydark;
color: $white;
}
}
After all, the best solution I found for this buggy behaviour was a little "workaround":
get rid of overflow: hidden in the class halfcolumn and hchlwrapper
in the ":before"-part: height to 101%, top to -1%, do similar changes to the ":after"-element
This way, I had to give up the comfort of hidden overflows, but it looks fine now.
I have a div with display:none (mobile first approach):
#my_div {
display: none;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
I use some media queries (after in the css) to display this div with some padding and font-size:
/* Between 600px and 649px */
#media (min-width: 600px) and (max-width: 649px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
/* Between 650px and 699px */
#media (min-width:650px) and (max-width:699px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}
/* Between 700px and 914px */
#media (min-width: 700px) and (max-width: 914px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
All works well until 699px. The third media query is not applied and the div isn't displayed.
If I use the following media queries, the div is displayed, but #media (min-width: 700px) is not applied. The #media (min-width:650px) is applied:
#media (min-width: 600px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
#media (min-width:650px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}
#media (min-width: 700px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
By using the chrome inspector I can see that over 700px it's applied the rule:
#my_div {
display: none;
...
}
EDIT
I have added one more media query
#my_div {
display: none;
color: red;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
}
#media (min-width: 600px) {
#my_div {
display: inline-block;
padding-top: 26px;
padding-left: 15px;
font-size: 18px;
}
}
#media (min-width:650px) {
#my_div {
display: inline-block;
padding-top: 24px;
padding-left: 20px;
font-size: 20px;
}
}
#media (min-width: 768px) {
#my_div {
display: none; /* it doesn't work, also with !important */
}
}
#media (min-width: 915px) {
#my_div {
display: inline-block;
padding-top: 22px;
padding-left: 35px;
font-size: 22px;
}
}
The only rule that is not applied is #media (min-width: 768px).
In my CSS, there aren't other rules that affect the display of my_div div. I'm using Bootstrap 3.
EDIT 2
I added the Bootstrap hidden-sm class to the div my_div:
<div id="my_div" class="hidden-sm"><strong>My slogan</strong></div>
In this way the div isn't displayed between 768px and 991px, but I would to display it again from 915px.
SOLUTION
I updated the JSfiddle by AngelosCharalis and, by copying and paste my code, I found an invisible dot character. Now it works.
First you must start from the highest pixel.
#media (max-width: 914px) {
#myId {
}
}
#media (max-width: 699px) {
#myId {
}
}
#media (max-width: 649px) {
#myId {
}
}
#media (max-width: 599px) {
#myId {
}
}
New to CSS. Cannot seem to get these paragraphs aligned properly! This is for a responsive page at lg, md, sm screen sizes. The blue boxes are off by just a few pixels and move around when the screen size changes. Why aren't they aligning perfectly within the green boxes? Both blue and green boxes are ps.
CodePen:
http://codepen.io/pleiovn/pen/RaBqgY
#p-text {
background-color: #a1ab5f;
padding: 10px;
text-align: left;
clear: both;
width: 90%;
height: 300px;
margin: 10px;
}
#p-head {
background-color: #5fa1ab;
padding: 10px;
text-align: right;
position: absolute;
top: 0px;
right: 0px;
width: 33%;
height: 50px;
margin: 10px;
}
It's because you wrote your media queries wrong
this one
#media (min-width: 991px) and (max-width: 768px)
should be
#media (max-width: 991px) and (min-width: 768px)
i want to implement following styles for 900 to 1023px
.navbar-brand {
float: left;
margin-right: 5px;
margin-left: -15px
}
.navbar-nav {
float: left;
margin-top: 0;
margin-bottom: 0
}
.navbar-nav>li {
float: left
}
.navbar-nav>li>a {
border-radius: 0
}
.navbar-nav.pull-right {
float: right;
width: auto;
margin:10px 0 ;
}
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none
}
.nav-collapse.collapse {
display: block!important;
height: auto!important;
overflow: visible!important
}
i applied following media query
#media screen (min-width: 900px) and (max-width: 1024px) {
// here goes above code
}
but problem is that these stlyes are being applied on 1300 + resolution as well . whats wrong with it please help
You miss and after #media screen
#media screen and (min-width: 900px) and (max-width: 1024px) {
// here goes above code
}
A rule I thought I had set up for only screens between 500px and 1024px is being applied even on screen sizes over 1024px.
Here is the CSS. The .red style is correctly applied on screens less than 480px. It's just the yellow is applied on all screens even those over the max-width of 1024px.
.buy {
border: 1px solid #ABABAB;
color: #333333;
display: block;
font-family: calibri,helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
height: 25px;
line-height: 25px;
margin: auto;
text-align: center;
text-decoration: none;
width: 70px;
}
#media only screen and (max-width: 480px) {
.buy {
color: red;
}
}
#media screen and (max-width: 1024px) and (min-width: 500px) {
.buy {
color: yellow;
}
}
you forgot only
#media only screen and (min-width: 500px) and (max-width: 1024px) {
.buy {
color: yellow;
}
}