I have the following CSS snippet in my site...
The span class renders fine on brower / ipad but the #media does not alter the font size on the iphone.
Please can someone let me know what I am doing wrong...
span.message
{display:table-column;
width:589px; min-height: 65px;
padding: 10px 10px 10px 10px;
float:right;
vertical-align: top;
border-top-width : 0;
background : white;
font : normal 70% sans-serif; vertical-align: top; color: #000000;
border-radius : 0em 1em 1em 0em;}
#media screen and (max-width:640px){
span.message {font-size:40%;}
}
Thanks to gaynorvader...
#media screen and (max-device-width: 480px){
body{
-webkit-text-size-adjust: none;
}
}
The above #media solves the font-resize issue. (provided you type it correctly).
You should see the answer in this link you are missing -webkit-text-size-adjust: none;
Related
I am trying to override existing sass styling of ion-card, by changing the headers padding to something that fit my app.
I did the following:
ion-card-header{
.card-header-md{
padding-right: 20px !important;
padding-left: 16px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
But nothing changed. I tried to add a background color to check it is getting the styling:
ion-card-header{
color: red;
.card-header-md{
padding-right: 20px !important;
padding-left: 16px !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
And the color changed to red. But the card-header-md is not changing. I need to change it on iOS and Android.
Here is a stackblitz for it.
The issue is that the card-header-md class is at the same level as the ion-card-header class. So this should work:
ion-card-header {
&.card-header-md {
padding-right: 20px
padding-left: 16px;
padding-top: 16px;
padding-bottom: 16px;
}
}
I've removed the !important because I think you don't actually need them (just tried in a new stackblitz demo and it's working fine without them).
I have read through other questions and tried to make my text become responsive past a certain breakpoint. But when I save it does not scale it just takes my font-size: 60px; value. Min-width means if the px value is greater than or equal to and vice versa for max-width correct? So in theory, this should work?
#media only screen and (min-width: 1024px){
.et_pb_text_2 h3{
font-size: 60px;
}
.et_pb_text_5 h3{
font-size: 60px;
}
}
#media only screen and (max-width: 1023px){
.et_pb_text_2 h3{
font-size: 4vw!important;
}
.et_pb_text_5 h3{
font-size: 4vw!important;
}
}
Can you please explain which problem you are facing or share your html?
I have created html for it and it works nicely.
Below 1024px screens, font-size will be 4vw. It means that the font size will be only 4 percent of viewport width whenever screen size is below 1024px.Whenever screen size is equal to or greater than 1024px it will stick to 60px.
See below code and it is working perfectly.
.et_pb_text_2, .et_pb_text_5 {
display: inline-block;
}
#media only screen and (min-width: 1024px){
.et_pb_text_2 h3{
font-size: 60px;
}
.et_pb_text_5 h3{
font-size: 60px;
}
}
#media only screen and (max-width: 1023px){
.et_pb_text_2 h3{
font-size: 4vw!important;
}
.et_pb_text_5 h3{
font-size: 4vw!important;
}
}
<div class="et_pb_text_2">
<h3>Hello</h3>
</div>
<div class="et_pb_text_5">
<h3>World</h3>
</div>
I am working on an app using ionic and i want to reproduce something similar to this horizontal scrolling card but i am quite lost as is not my solution. I am wondering if someone has been able to do something similar should shed some light.
You can use ion-slide-box .
You can customize the border,width, etc. For example I make invisible for:
.slider-pager {
display:none !important;
}
And add border, fix the margin:
.slider-slide {
padding-top: 80px;
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
width: 200px !important;
border: 1px solid #000;
margin: 62px 56px
padding-left: 20px;
padding-right: 20px;
}
Have a nice coding and make your own custom style!
My CSS is working perfectly fine on Google Chrome, Mozilla, and Opera. I have also tried Internet Explorer but that was a bust - Not that it matters.
My biggest issue right now is getting my CSS to work correctly on mobile safari (and other smartphone browsers like android).
HTML:
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
transition: all .2s ease, background-color .01s ease, color .01s ease;
border-bottom: none;
}
.load-more.load-more--loading {
animation: rotate 1.5s linear infinite;
animation-delay: .2s;
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
<form action="stats.php" method="GET">
<div class="group">
<input type="text" name="player" autocomplete="off"><span class="highlight"></span><span class="bar"></span>
<label>USERNAME</label>
</div>
<center>
<input type="submit" value="CHECK STATS" class="load-more">
</a>
</center>
</form>
The CSS (and a javascript file that I'm using) turn the button into a loader when you click on it, but on mobile browsers like safari the button just disappears when you click it with no loader.
Example: https://epicmc.us
There's some support in iOS 7 and 8 for transform but none for animation in iOS. You're going to have to use jQuery or something to get the effect to work in mobile safari. Caniuse.com tells us the support here for these attributes: http://caniuse.com/#search=transform
This CSS works perfectly on mobile safari...
.load-more {
background-color: #00aa00;
color: #ffffff;
display: block;
font-family: 'Numans', sans-serif;
font-weight: lighter;
height: 3em;
line-height: 3em;
overflow: hidden;
padding: 0 3em;
text-align: center;
text-decoration: none;
border-bottom: none;
}
.load-more.load-more--loading {
background-color: transparent;
border: .3em solid #e1e1e1;
border-radius: 1.5em;
border-top-color: #00aa00;
box-sizing: border-box;
height: 3em;
color: transparent;
padding: 0;
pointer-events: none;
width: 3em;
-webkit-animation: rotation 2s infinite linear;
}
#-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(359deg);}
}
I have been working on this problem for awhile now. I think that I have the proper media query for the iPhone 4s (retina); however, the Safari Mobile will not render my stylesheet correctly. Most of the problem is that the background images are not rendering at all. The size of the background pics (for each section) are 640px x 960px. They are also saved as .jpg files. Here is the stylesheet for the iPhone:
#media (min--moz-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2),
(min-resolution: 192dpi),
(min-resolution: 2dppx) {
/* Home Section */
#home{width: 100%;
height: 480px;
background-image: url(../images/landingPageRetina.jpg) 50% 0 no-repeat;
background-size: 320px 480px;}
#navbar{display: none;}
#albumCover{width: 250px;
height: 250px;
margin-top: 175px;}
#albumCover p{font-size: 5em;}
/* About Section */
#about{width: 100%;
height: 480px;
background-image: url(../images/aboutRetina.jpg) 50% 0 no-repeat;
background-size: 320px 480px;}
.info{width: 260px;
height: 260px;
margin: 100px 0 0 100px;}
.headline{font-size: 2em;
margin: -20px 0 5px 0;}
.info p{padding-top: 30px;
font-size: .875em;
margin-bottom: -100px;}
/*Music Section */
#music{width: 100%;
height: 480px;
background-image: url(../images/musicMobile.jpg) 50% 0 no-repeat;
background-size: 320px 480px;
position: fixed;}
.info ul li{text-align: center;
font-family: eb-garamond, sans-serif;
font-size: 1.5em;
line-height: 2em;
text-transform: capitalize;}
/* Lighthouse */
iframe{width: 50%;
height: 50%;}
#close{margin: 50px 0 15px 350px;
padding: auto 5px;}
/*Videos Section */
#videos{width: 100%;
height: 480px;
background-size: url(..images/videosMobile.jpg);
background-size: 320px 480px;}
/*Connect Section */
#connect{width: 100%;
height: 480px;
background-image: url(..images/connectMobile.jpg);
background-size: 320px 480px;}
/*Contact Section */
#contact{width: 100%;
height: 480px;
background-image: url(../images/contactMobile.jpg);
background-size: 320px 480px;}
#email a{font-size: .625em;}
.primeLine{font-size: 1em;}
#email li{margin: 0;}
}
I have exhausted all my other resources, does anyone have any ideas?