Can anyone see why this media query does not work? The first part of the CSS .header-x1 is working fine. But I would like to change font size when the max width is 768px. But nothing happens when I run my code here. Can anybody see why?
<p class="header-xl">
This is a test
</p
.header-xl {
font-weight: 900;
font-size: 5em;
line-height: 1;
text-transform: uppercase;
color: #fff;
padding-top: 160px;
}
#media(max-width:768px) {
header-xl {
font-size: 8px;
}
You are missing a . for the class in media query, Instead of header-xl add .header-xl
#media(max-width:768px) {
.header-xl {
font-size: 8px;
}
From the looks of it you need .header-xl not header-xl inside the media query
Change header-xl to .header-xl
#media(max-width:768px) {
.header-xl {
font-size: 8px;
}
}
Related
I have a code like this:
.text--heading {
width: 382px;
height: 55px;
font-family: Tomica;
font-style: normal;
font-weight: bold;
font-size: 40px;
line-height: 55px;
color: #181E4B;
}
I need to make it responsive and decrease lengths, font-sizes etc of most elements.
Does media queries have any facility where i could be able to do something like the following:
#media only screen and (max-width: 700px) {
.text--heading {
font-size: size /* where size is 30% of size already defined previously*/
}
}
What you can do is to scale the element, which - if I understand your intentions correctly – should have a very similar outcome, at least for the CSS rule you posted above. So the media query would be as follows (where everything would be 50% of the original size):
#media only screen and (max-width: 700px) {
.text--heading {
transform: scale(0.5);
}
}
See also https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()
a combination of CSS var and calc could work, it's CSS3 though and might not work in older browsers.
:root {
--a: 40px;
}
.text--heading {
width: 382px;
height: 55px;
font-family: Tomica;
font-style: normal;
font-weight: bold;
font-size: var(--a);
line-height: 55px;
color: #181E4B;
}
#media only screen and (max-width: 700px) {
.text--heading {
font-size: calc(var(--a) * .3);
}
}
Based on the image above, I've faced some problem when I tried to add this code display:block, but nothing has changed. What is the problem with my text? How can I fix them?
I'm using this reset codes:
http://html5doctor.com/html-5-reset-stylesheet/ And I just set font-size:80px;
.counter-box p
{
font-size: 20px;
}
.counter-box .counter
{
font-size: 80px;
}
Use line height property:
.counter-box .counter
{
font-size: 80px;
line-height:80px;
}
Sorry, this is driving me crazy, I'm sure its simple but cannot crack it.
As per the screen shot, the text is being cut off for mobile devices, I thought it would be an adjustment in the css here by adjusting margins or borders, but no avail to this. Can someone suggest a solution? or point me to a solution?
View the site here www.yostrato.com
#owl-main-text {
height: 180px;
}
#owl-main-text h2 {
font-size: 25px;
text-align: center;
color: #fff;
font-weight: 600;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 10px;
margin-top: 0;
margin-bottom: 7px;
margin-top: 35px;
font-family: "Montserrat";
background-color: rgba(193, 48, 48, 0.79);
}
Change height to min-height here:
#owl-main-text {
min-height: 180px; /* or whatever value */
}
Solved by increasing height to 180px:
#owl-main-text {
height: 180px;
}
Use a media query to increase the height off the red colored div just before the H2 text starts to get cut off.
I'm trying to create a responsive layout, but for some reason, when I wrap the relevant CSS in a media query, it isn't recognized: i.e., if I resize my browser window or check it out on my iPhone, the CSS is not applied. I'm not sure what I'm doing wrong here. Here is the relevant code (note that I'm working with the Types plugin within WordPress, hence all the bracketed stuff):
HTML
<div class="client-stats">
<h3>Stats</h3>
<p><strong>Event Date:</strong> [types field="date-of-event" style="text" format="F j, Y"][/types] </p>
<p><strong>Event Type:</strong> [types field="event-type"][/types]</p>
<p><strong>Special Effects:</strong> [types field="special-effects"][/types]
<p><strong>Equipment Used:</strong> [types field="equipment-used"][/types]</p>
</div>
<div class="client-description">
<div class="portfolio-description">
[wpv-post-body view_template='None']
</div>
</div>
CSS
.client-stats {
width: 325px;
float: left;
margin-right: 15px;
padding: 0 7px 0 35px;
background-color: #333;
background-image: url('/wp-content/uploads/2016/05/paper-1.jpg');
min-height: 350px;
line-height: 1.5;
color: #fff;
}
.client-stats p, strong, h3 {
font-family: "Courier New",monospace;
}
.client-stats h3 {
text-transform: uppercase;
margin-bottom: 20px;
color: #fff;
}
.client-stats strong {
text-decoration: underline;
font-family: "Courier New",monospace;
}
.client-description {
margin-left: 350px;
}
#media only screen and (max-width: 768) {
.client-stats {
width: 100%;
float: none;
margin-right: 0;
}
.client-description {
width: 100%;
margin-left:0;
}
}
If I remove the media query wrap, the CSS is applied fine (so it's not the CSS rules, specifically that are the problem).
The relevant page is here, if that helps: http://107.170.41.117/client/client-6/
#media only screen and (max-width: 768) {
CSS lengths require units. 768 is not a valid width.
This would have been picked up if you had used a validator.
I have this site:
http://dl.dg-site.com/functionmentes/
This is code CSS:
#media screen and (width:1024px)
{
#titlu_footer
{
margin-left:90px;
}
}
I tried to add this code but not working.
What is wrong?
In your media query change width to min-width or max-width
Additional problem
This is currently your CSS for #titlu_footer
.page-id-1637 #titlu_footer {
color: #264572;
font-family: muli, sans-serif;
letter-spacing: 2px;
line-height: 1.4;
font-weight: 400;
margin-left: 302px;
margin-top: 30px;
padding-top: 20px;
}
If you look using chrome/firefox developer tools you'll see that margin-left 302px is taking precedence over your media queries.