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
Related
New to stack overflow, but I was struggling on this one. I recently created my portfolio site which appears to be working across all device break points and the media query on my laptop in Chrome. However, when I go to the site on my phone (tried both Chrome and Firefox) the header line-height disappears. It's crunched and unreadable. Any ideas what might be happening there? I'd really appreciate it! It seems impossible to debug because it's only happening via mobile.
.text--header {
font-size: 30px;
line-height: 38px;
display: block;
font-stretch: none;
margin-top: 95px;
}
#media screen and (min-width: 320px) and (max-width: 630px) {
.text--header {
font-size: 30px;
letter-spacing: -0.04em;
line-height: 32px;
}
}
<div class="ct ct--body">
<span class="text text--header">Jenna is a Product/Visual Designer.</span>
</div>
Actually, the problem in Media query won't forget to follow standard declarations of the media query.
.text--header {
font-size: 30px;
line-height: 38px;
display: block;
font-stretch: none;
margin-top: 95px;
background-color: #ccc;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 630px) {
.text--header {
font-size: 30px;
letter-spacing: -0.04em;
line-height: 32px;
background-color: red;
}
}
<meta name="viewport" content="width=device-width" />
<body>
<div class="ct ct--body">
<span class="text text--header">Jenna is a Product/Visual Designer.</span>
</div>
</body>
Appreciate if it is useful :)
I'm trying to add full responsiveness to my website. But, for some reason, it won't read parts below 980px of width. Here's my CSS:
#media screen and (max-width:1029px){
h1{
font-size: 75px;
}
h2{
font-size: 25px;
}
}
#media screen and (max-width:980px){
h1{
font-size: 70px;
}
h2{
font-size: 20px;
}
}
#media screen and (max-width:954px){
h1{
font-size: 65px;
}
h2{
font-size: 15px;
}
}
The 980px part is the last that can be read, if I change it to 979px it stops reading it, as if it wasn't there. !important doesn't change anything. What can I do? Why is there a magical barrier of 980px?
Make sure you got <meta name="viewport" content="width=device-width,initial-scale=1"> in <head> element
I think you should realigned your media, it will be work for you may be.
I make a fiddle and it's working as you want with media query
working fiddle
#media screen and (max-width:954px) {
h1 {
font-size: 65px;
}
h2 {
font-size: 15px;
}
}
#media screen and (max-width:1029px) {
h1 {
font-size: 75px;
}
h2 {
font-size: 25px;
}
#media screen and (max-width:980px) {
h1 {
font-size: 70px;
}
h2 {
font-size: 20px;
}
}
}
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 trying to use media queries to make my layout responsive to the screen size. I'm just testing it out at the moment and I can't for the life of me get the method to work. I simply set up a media query that's supposed to change the background color of my links to red when the screen goes below 480px, but it just doesn;t work when I shrink my screen.
You can see this in action at http://www.noellesnotes.com
Any help would be appreciated.
Here's the relevent code:
HTML:
<div class="site-navigation">
About
Work
<div class="site-title">Noelle Devoe</div>
Blog
Contact
</div>
CSS:
.site-navigation a{
width: 125px;
float: left;
padding: 50px 0 50px 0;
letter-spacing: 4px;
text-transform: uppercase;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
color: rgb(82,82,82);
}
.site-navigation a:hover{
font-weight: bold;
background-color: rgb(242,168,134);
color: rgb(255,255,255);
text-shadow: rgb(200, 200, 200) 1px 1px 0px;
}
#media only screen and (max-device-width: 480px) {
.site-navigation a{
background-color: red;
}
}
change your max-device-width to max-width
#media only screen and (max-width:480px){
.site-navigation a {
background-color: red;
}
}
Should do the trick for you. Also a great page to look at is the media queries page on MDN
USE IT LIKE THIS:
#media only screen and (max-width: 480px){
}
this would be a good read http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
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>