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>
Related
I created a responsive html email using the media queries method mentioned in this article. It works perfectly on outlook mobile app and its mentioned that it should work on iOS mail but it doesn't, any ideas how to fix that? This is the media queries part of the code:
#media screen and (max-width: 375px) {
*[class="padding"] td, .padding td {
padding: 24px !important;
}
*[class="mobile_scale"], .mobile_scale {
width:100% !important;
max-width: 100% !important;
min-width: 100% !important;
}
*[class="shorten_space"], .shorten_space {
height: 16px !important;
line-height: 16px !important;
}
*[class="mobile_scale"] img, .mobile_scale img {
width:100% !important;
height: auto;
}
*[class="mobile_center"], .mobile_center {
align-items: center !important;
text-align: center !important;
margin: 0 auto !important;
}
*[class="sub_button"], .sub_button {
align-items: left !important;
text-align: left;
padding-top: 16px;
}
}
Campaign Monitor's articles on email are very dated, unfortunately.
You don't need these at all: *[class="shorten_space"]. I believe from memory that was a hack to get classes working for Yahoo webmail, and they've updated years back so we don't need that anymore.
Just use the standard css, i.e. .shorten_space
(For all of them)
That would be a reason why it wouldn't on Gmail apps, though, not iOS. That's because Gmail removes all style blocks that it doesn't agree with.
I'd say the reason why it wasn't working for iOS, though, is becaues of the 375px limit. iPhones tend to be larger these days. Try bumping that up to 450px or so.
I'm facing a problem with a newsletter. I have included media queries in it so mobile viewers get something nicer. If I view my newsletter in a browser and resize it, I can see that it works fine, both on mobile/desktop. But when I view it through iphone's Mail app, my media queries are getting ignored for some reasons I'm not aware about. The mailbox I'm testing it with isn't a gmail one by the way.
You can see it here : http://www.libraryofarts.com/newsletters/11-06-13/
Here's the head part of my code :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Pre-Opening librairie LO/A</title>
<style type="text/css" media="screen">
#outlook a{padding:0;}
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;}
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;}
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;}
img{-ms-interpolation-mode:bicubic;}
/*
* RESET STYLES
*/
body{margin:0; padding:0;}
img{border:0; height:auto; line-height:100%; outline:none; text-decoration:none;}
table{border-collapse:collapse !important;}
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
/*
* MOBILE STYLES
*/
#media only screen and (max-device-width: 480px){
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
#bodyCell{padding:10px !important;}
/* ======== Page Styles ======== */
#templateContainer{
max-width:700px !important;
width:100% !important;
}
h1{
font-size:24px !important;
line-height:100% !important;
}
h2{
font-size:20px !important;
line-height:100% !important;
}
h3{
font-size:18px !important;
line-height:100% !important;
}
h4{
font-size:16px !important;
line-height:100% !important;
}
/* ======== Header Styles ======== */
#templatePreheader{display:none !important;} /* Hide the template preheader to save space */
#templateHeader p {
pointer-events: none;
}
#templateHeader p > a {
text-decoration:none; color:inherit;
}
#headerImage{
height:auto !important;
max-width:700px !important;
width:100% !important;
}
.headerContent{
font-size:20px !important;
line-height:125% !important;
}
/* ======== Body Styles ======== */
.bodyContent{
font-size:18px !important;
line-height:125% !important;
}
/* ======== Column Styles ======== */
.templateColumnContainer{display:block !important; width:100% !important;}
.columnImage{
height:auto !important;
max-width:480px !important;
width:100% !important;
}
.leftColumnContent{
font-size:16px !important;
line-height:125% !important;
}
.rightColumnContent{
font-size:16px !important;
line-height:125% !important;
}
/* ======== Footer Styles ======== */
.footerContent{
font-size:14px !important;
line-height:115% !important;
}
.footerContent.Bottom {
text-align : center;
}
.footerContent.Bottom .online {
margin-left : 0;
margin-top : 10px;
display : block;
}
.footerContent a{display:block !important;} /* Place footer social and utility links on their own lines, for easier access */
.footerContent ul {
list-style: none;
margin : 0;
padding : 0;
}
.footerContent ul li {
float : none !important;
}
.footerContent ul li img {
display : block;
margin : 0 auto;
}
.test {display : none !important;}
}
</style>
Has anyone an idea on why I can't get this media query working through iphone's Mail ?
Thanks,
Faced the same issue
You should use " visibility : hidden " rather than " display : none " (property). I faced the same problem and resolved it with the help of "visibility"
element {
visibility: visible;
}
element {
visibility: hidden;
}
other example :
{ visibility: hidden; }
{ visibility: visible; }
{ visibility: collapse; }
You don't need " !important " at all if you use the correct CSS Property
Read this for more clarity :
w3Schools
difference between display and visibility
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;
I have a website (http://ukchina-trading.com/) with the following header:
HTML
<div class='leftImage'>
<img src='image/unionjack.png'>
</div>
<div class='title'>
<h1>J Plus Trading</h1>
<h2>Briding the gap between China and the UK</h2>
</div>
<div class='rightImage'>
<img src='image/chinawings.png'>
</div>
CSS
.title h1 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
font-size: 68px;
line-height: 65px;
padding-top: 60px;
margin-bottom: 80px;
}
.title h2 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
position:relative;
top:-88px;
left:3px;
font-size: 16px;
color: #FF3300;
}
.rightImage {
position:absolute;
right: 150px;
top: 2px;
}
.leftImage {
position:absolute;
left: 150px;
top: 2px;
}
When the website is view on a computer the header is fine, but when viewed on the iphone screen the images are pushed over the title, hiding it.
What is the best way to redo the header to stop this?
I'd suggest the best thing to do would be to bring the flags inside the 900px width of the website.
Keep them to the left and right of the "J Plus Trading" text but just use floats rather than absolute positioning.
your problem is the absolute positioning you are using, as this causes the images to be in the same position regardless of anything else on the page. instead of absolute try using float:left; and float:right on your left and right images, and this way the text will not be pushed over it. you may have to create extra containing divs with margins or padding so that the images are positioned how you want them
I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much greater than screen & hence gray background is seen after image completes.
My question is whether there is a way so that we can keep the background image fixed & scroll or move only content of page & not background image.
Just to mention I have tried full size background jquery pluggin. Its working on Android but not on iOS.
Can anyone please help? Thanks in advance.
Ok, so what I did instead was to create a fixed element within the body element of the page.
So it would look like
<body>
<div id="background"></div>
...
</body>
And for the CSS I stated the following:
#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
background-size:contain;
}
And this did the trick for me. Hopefully it helps (someone out there :P)
You looking for css background-attachment property.
div[data-role="page"]{
background-attachment: fixed;
}
Update:
background-attachment:fixed is supported from iOS 5, if you using older version of iOS you may consider usage of iScroll.
you can try this:
.ui-mobile
.ui-page-active{
display:block;
overflow:visible;
overflow-x:hidden;
}
works fine for me.
You can set your background image to the jQuery page:
.ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }
Try with this, this work for me.
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0 fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;
<body>
<div id="background"></div>
...
</body>
css:
#background {
background-image: url("/images/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
position: fixed;
background-position: 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (max-width: 480px) {
#background {
background-attachment: initial !important;
}
}
The problem is that iOS mobile devices have errors rendering simultaneously background-size:cover; and background-attachment:fixed; so you have to fix it by #media