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.
Related
Im trying to get my text to fall under the image when the window is resized, I am new to coding and this is the very first thing ive tried to code so dont judge lol.
Codehttps://jsfiddle.net/b17nhj3y/1/#&togetherjs=wdEDSQBkB2
You should check for media queries in CSS, if you want to display elements in a page differently on different devices/screen size.
Sample:
#media (max-width: 12450px) { your style here.. }
You can use media queries to make your webpage responsive :
#media only screen and (min-width : 320px) and (max-width : 720px) {
#p {
position: relative;
bottom: 500%;
overflow: hidden;
margin-left: 15%;
margin-top: 50px;
margin-right: 25px;
font-weight: 200;
font-size: 14px;
color: #757575;
transform:translateX(-0.5%);
}
}
Check here: https://jsfiddle.net/gs86uL5k/
You have a lot of negative margins and absolute positions. Try this for the CSS.
#p {
overflow: hidden;
margin-right: 25px;
font-weight: 200;
font-size: 14px;
color: #757575;
transform: translateX(-0.5%);
}
If you need this to only happen on a certain screen size, check out media queries.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
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.
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;
}
}
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.
Got another question open on this problem, but I'll make it more specific here, and may be if I get a right solution here, it will help to fix the rest.
Live link here
http://soloveich.com/pr6/blog/
So, I have a background div for date. For some reason, it only displays correctly on narrow screens, and styling of it doesn't even show in source code on wider ones. The styling is there. Checked it in wp admin panel theme editor.
html
<div class="date3">
<div class="datetxt">
<div class="month"><?php the_time('M ') ?></div>
<div class="day"><?php the_time('j ') ?></div>
</div></div>
css
.date3 {
width:100px;
height: 100px;
border: 2px solid transparent;
border-radius: 100px;
background-color: #7E7E7E;
color: #fff;
text-align: center;
}
#media screen and (max-width: 530px) {
.date3 {
width:100px;
height: 100px;
border-radius: 60px;
}
}
.month {
text-align: center;
margin-top: 12px;
text-transform: uppercase;
font-size: 24px;
font-weight: 200;
font-family: 'Exo 2', sans-serif;
}
.day {
text-align: center;
margin-top: -8px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Exo 2', sans-serif;
}
Also, tried to cheat and set up mediaquery for larger resolution. No luck.
p.s.
all of that started happening after posting a youtube video with post breaker in text
The css for .date3 only exists in media queries that's why it works on lower resolution screens. Try putting it above all the media queries. Should work