Hello I am making a website and i feel it is quite important that the text on the page is scalable for if the user has a smaller monitor or is using split screen.
I have the following HTML coding, that I believed would make it scale effectively but nothing happens?
HTML:
<p id="text">
View <a id="advertlinks" href="Prices.html">Prices</a> </br>Or <br><a id="advertlinks" href="Contact_Us.html">Book</a> A Lesson
</p>
CSS
#text
{
z-index:100;
position:absolute;
margin-top:-22%;
margin-left: 70%;
padding: 2%;
width: 22%;
height: 25%;
background-color: #f6da30;
opacity:0.6;
font-family: Impact, Charcoal, San-Serif;
font-size: 170%;
text-align: center;
-moz-border-radius: 30px;
border-radius: 30px;
}
Use CSS media queries:
#media all {
#text {
/* Default font size */
font-size: 12pt;
}
}
#media all and (max-width: 768px) {
#text {
/* Font size for smaller displays/screens */
font-size: 16pt;
}
}
Further reading: http://css-tricks.com/css-media-queries/
If you want the text to scale relative to the screen width, then your best bet is a responsive text jQuery plugin such as FlowType and FitText. If you want something light-weight, then you can use my Scalable Text jQuery plugin:
http://thdoan.github.io/scalable-text/
Sample usage:
<script>
$(document).ready(function() {
$('#text').scaleText();
}
</script>
Related
I am wanting to change the font size of some text in an HTML email at 2 different screen widths with media queries. This works as expected on all devices/clients except in Outlook App for iOS.
Here is an example of the inline HTML:
<td class="para" align="left" style="border-collapse: collapse; mso-line-height-rule: exactly; font-family: Times, 'Times New Roman', serif; font-size: 17px; color: #333333; line-height: 24px; text-align: left; text-indent: 29px; padding: 20px 0 0 0;"><span style="font-family: Times, 'Times New Roman', serif !important;">some text here</span></td>
Then I have the following CSS:
<style>
#media only screen and (max-width:600px) {
.para {
font-size: 18px !important;
}
}
#media only screen and (max-width:445px) {
.para {
font-size: 20px !important;
}
}
</style>
If I only have one of the media queries, it works as expected in the Outlook App for iOS, but when I add the second one it no media queries work at all.
Am I doing something wrong or is this just something that you have to work around with iOS Outlook?
The issue is due to a bug in their implementation, as documented here: https://github.com/hteumeuleu/email-bugs/issues/92
The easiest solution, since perhaps your minifying code may be removing whitespace and creating the double curly braces, }}, is to close the style block and start a new one, i.e.:
<style>
#media only screen and (max-width:600px) {
.para {
font-size: 18px !important;
}
}
</style>
<style>
#media only screen and (max-width:445px) {
.para {
font-size: 20px !important;
}
}
</style>
As you can see from this image of my site:
https://www.flickr.com/photos/77598212#N03/33735427334/in/dateposted-public/
My button is crammed right underneath the randomly generated text. Instead, I'd like to lower it.
But additionally, I'm trying to keep it completely "anchored" to the page, because right now when I click the button, a random image generates, but that image is moving the button vertically depending on the size of the image. Not good.
Instead, I'd like that button to remain in the same position, always.
Any thoughts/help would be appreciated. I'm still quite new to all this. Thank you. -Wilson
link to the actual website http://www.wilsonschlamme.com/test4.html
css:
*It's pretty simple. First two elements here are controlling centering the page. The rest are self explanatory, showtext refers to the random text generator.
*{
margin:0;
padding:0;
}
body{
text-align:center; /*For IE6 Shenanigans*/
}
button {
color: #900;
font-weight: bold;
font-size: 150%;
text-transform: uppercase;
}
h1{
margin-top:20px;
font-size: 250%;
overflow:hidden; /* older browsers */
font-family: hobeaux-rococeaux-sherman, sans-serif;
}
img {
max-width:600px;
max-height:440px;
box-shadow: 1px 5px 5px grey;
border-style: groove;
border-width: 1px;
margin-top:20px;
}
#ShowText{
overflow:hidden; /* older browsers */
word-wrap: break-word;
padding-top: 100px;
max-width: 1000px;
font-size: 25px;
font-family: vendetta, serif;
line-height: 25px;
margin: 0 auto;
}
Use:
#buttonfun {
margin-top: 20px;
}
Wrap the img with a div:
<div class="image-wrapper">
<img src="images/297.jpg" />
</div>
and add the CSS:
.image-wrapper {
height: 440px;
}
I'm trying to make a responsive wordpress theme and I am having trouble with the title text not being responsive.
When I try different screen sizes the title text eventually goes OUT of the header and I don't want that. I would like for it to stay inside the header div no matter the screen size.
My header:
<div id="header">
<div id="titlebox">
<p class="blogtitle"><?php echo get_bloginfo ( 'name' ); ?></p>
<p class="tagline"><?php echo get_bloginfo ( 'description' ); ?></p>
</div>
<div id="searchbox"><?php get_search_form(); ?> </div>
</div>
The CSS:
#header {
width: 100%;
height: 23.2%;
margin-top: 2.1%;
margin-bottom: 2.1%;
}
#titlebox {
width: 60%;
float: left;
}
.blogtitle {
font-style: normal;
text-shadow: 2px 2px #a2a2a2;
font-size: 3em;
padding-top: 2.1%;
padding-right: 2.1%;
padding-bottom: 0;
padding-left: 2.1%;
}
.tagline {
font-style: italic;
text-shadow: 1px 1px #a2a2a2;
font-size: 0.75em;
padding-top: 0;
padding-right: 2.1%;
padding-bottom: 2.1%;
padding-left: 2.1%;
}
#searchbox {
width: 40%;
float: right;
}
At smaller widths, your text is just too large so it overflows. You need to use media queries so that when your widths go below a certain point, you shrink the font size.
e.g.:
#media all and (max-width: 767px) {
.blogtitle {
font-size: 2em;
}
}
#media all and (max-width: 500px) {
.blogtitle {
font-size: 1em;
}
}
And to answer to last question, creative responsive design is way more than I can answer here. Rather than randomly picking breakpoints at which to change font sizes, use something like the Chrome Responsive Inspector plugin. It will show you what responsive breakpoints are already in use in your theme. It would be best to try and match those. That way your changes will match with any other changes in the theme at the same breakpoints.
That says that for all widths up to 767 wide, make the font-size for the .blogtitle class 2em instead of the default 3em.
This works for me
.resposive_text {
font-size: 30px;
font-weight: 600;
/*here put anything you want for desktop size*/
}
#media (max-width: 500px) {
.resposive_text {
font-size: 18px;
/*here put anything you want for mobile size*/
}
}
And in my div
<div class="resposive_text">
<p>Bienvenidos a ENL Team Peru</p>
</div>
HTH
I am creating a web site for a friend and is strictly practice for me. So far I have got the banner w/ logo to fit any screen, but now I am adding buttons so a user can navigate through out the site. When zooming in or out the buttons go all over the place. I am using an external CSS sheet to help format my HTML. Here is my CSS3 code
/* W & W Hydrographics, LLC. */
/* Robert W. Anderson HTML 5.0 */
.mybutton {
display: inline-block;
position: relative;
margin: 10px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 30px/35px Arial, sans-serif;
box-shadow:#000 4px 4px 5px;
}
/* Our Gallery */
.gallery {
position:absolute;
left:5%;
top:5%;
color: #F5DA62;
background: #3F403D;
}
/* Available Patterns */
.patterns {
position:absolute;
left:300px;
top:230px;
color: #F5DA62;
background: #3F403D;
}
/* Contact Us */
.contact {
position:absolute;
left:650px;
top:230px;
color: #515151;
color: #F5DA62;
background: #3F403D;
}
body {
background-size: 100%
}
You can use CSS3 to find the width of the screen and adjust the size of the buttons(again, according to the size).Here is a small explanation of an example just so you can unserstand.Suppose I had a button with id #button with a 300px width like this-
#button{
width:300px;
}
If i wanted to change the width to 100px in mobiles(mobiles have average width 470px;) I can do it like this-
#media (max-width: 470px) {
#button{
width:300px;
}
}
You can use the same logic to adjust size of other elements and even multiple elements at the same time like this-
#media (max-width: 470px) {
#button{
width:300px;
}
#button2{
width:300px;
}
#someelement{
color:#C30;
}
}
If you didnt understand a part of my answer, just comment. I am free to answer more doubts.
I'm building a responsive wordpress theme and trying to set up size changing font, depending on screen width. Somebody suggested jquery, but i also decided to try css media queries. Font size still doesn't change and entire text slides under header background.
Live link here
http://soloveich.com/pr4/
Code looks like this
<div class="container-full" id="spbg">
<div class="row">
<div class="col-lg-5"><div class="visible-md visible-lg" id="gr"></div>
<div class="visible-sm visible-xs" id="grsm"></div>
</div>
<div class="col-lg-7">
<div class="visible-sm visible-md visible-lg sptxt" id="sptxt">
<?php
$post_id = 127;
$queried_post = get_post($post_id);
echo $queried_post->post_content;
?>
</div>
</div>
</div>
and the css
#spbg {
margin-top: 100px;
color: white !important;
background-image: url(http://soloveich.com/pr4/wp-content/themes/blain/images/spbg.png);
background-repeat: repeat-x;
}
#sptxt {
padding-right:20px;
padding-top: 20px;
color: #fff;
font-family: tahoma;
font-weight: bold;
line-height: 70px;
}
#gr {
width: 417px;
height: 283px;
margin-left: 30px;
margin-top: -60px;
background-image: url(http://soloveich.com/pr4/wp-content/themes/blain/images/gr.png);
background-repeat: no-repeat;
}
#splmd {
color: #fff;
font-family: tahoma;
font-size: 20px;
font-weight: bold;
text-align: center;
}
#media screen and (max-width: 1024px) {
.sptxt {
font-size:10px;
}
}
#media screen and (min-width: 1124px) {
.sptxt {
font-size:29px;
}
}
What am i doing wrong?
You're using .sptxt instead of #sptxt
#media screen and (max-width: 1024px) {
#sptxt {
font-size:10px;
}
}
#media screen and (min-width: 1124px) {
#sptxt {
font-size:29px;
}
}
You have to use the ID (#sptxt) in the media query not class (.sptxt)
#sptxt {
font-size:10px;
}
It doesn't look like anything is wrong from my browser (I'm on the latest Chrome on Windows 8.1). I'd post a picture, but I don't have the reputation for that yet.
And to others who are saying that he needs to be using the ID and not the class - why? He includes the class sptxt as well as the ID, so either one should work just fine.
It's working :- Because of white color the text disappers.
#media screen and (max-width: 1024px) {
#sptxt {
font-size:10px;
color: #000;
}
}
#media screen and (min-width: 1124px) {
#sptxt {
font-size:29px;
}
}
It works for me .. try Firefox developer tools "Responsive Design View". It's taking its 10px font-size from #sptxt class from main.css line 69
tested on Chrome 30+ also