I am finishing a project which is mainly a photo viewer with a short video at the beginning. Over the video there is a title, something very simple like so:
<div id="presentacion">
<h1>PARANA</h1>
<h2>PHOTOGRAPHIES DE MAX RUIZ</h2>
</div>
with a css like so:
#presentacion h1{
font-family: Deser;
font-weight: lighter;
padding: 0;
margin: 0;
margin-right: -.2em;
line-height: 1em;
font-size: 7.5em;
letter-spacing: .35em;
color: white;
}
#presentacion h2{
font-family: Deser;
font-weight: lighter;
letter-spacing: .2em;
padding: 0;
margin: 0;
font-size: 1.8em;
color: white;
}
This looks fine on desktop computers:
http://maxruiz-parana.com
For mobile I have a media queries set up with slightly different css, like so:
#presentacion h1{
font-family: Deser;
font-weight: lighter;
padding: 0;
margin: 0;
margin-right: -.2em;
line-height: 1em;
font-size: 9em;
letter-spacing: .35em;
color: white;
}
#presentacion h2{
font-family: Deser;
font-weight: lighter;
letter-spacing: .2em;
padding: 0;
margin: 0;
font-size: 3.5em;
line-height: 1.3em;
color: white;
}
As you can see, the differences are minimal. Now, if you check the same website on a mobile phone, you will see that the title starts at a completely different place and then snaps into place.
Why is this happening? Any ideas appreciated. Thanks
EDIT-------------------------------------------------------------------
I found that eliminating the following declaration:
html {
position: fixed;}
From my media queries section solved the problem of the title moving, but I do want the html to be fixed for mobile. Any ideas appreciated. Thanks
Related
I have an HR tag underneath a header; I noticed that there are actually two lines (one underneath the header and another one above it) when I only want one line underneath the header.
How can I remove the top line and keep only the bottom underline? The top line is not only unnecessary, but it messes up the website's look..
<div class="about-us-text">
<hr> <h1>We Create </h1> <hr>
<h3>PLACES THAT INFLUENCE</h3>
<p>We design places that creates a compelling, communal, environmental, and cultural impact on individuals and communities.</p>
<h3>PLACES THAT INSPIRE</h3>
<p>We design places that encourage an impassioned and spiritual connection. We regard design to be contextual – responding to its layered history.</p>
<h3>PlACES THAT INFORM</h3>
<p>Our modus operandi leverages the competence of the entire firm to consistently produce well-informed design.</p>
</div>
hr {
margin-top: -12.5px;
width: 14.3rem;
height: 1.5%;
color: black;
background: black;
border-radius: 2px;
}
.what-we-do h1{
padding-top: 80px;
font-family: interstate, sans-serif;
font-weight: 700;
font-size: 48px;
/*-webkit-text-decoration: underline 12px;
text-decoration: underline 12px;
-webkit-text-underline-position: under;
text-underline-position: under;*/
color: #300600;
padding-bottom: 25px;
}
.what-we-do h3{
font-family: interstate, sans-serif;
font-weight: 700;
font-size: 24px;
padding-top: 65px;
color: #300600;
}
.what-we-do p {
padding-top: 50px;
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-style: normal;
font-size: 18px;
word-spacing: 0.75px;
line-height: 50px;
color: #300600;
}
Give the upper hr a class upperhr then use #media query for your preferred screen size then set display property to none.
.what-we-do{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 94px;
}
hr {
margin-top: -12.5px;
width: 14.3rem;
height: 1.5%;
color: black;
background: black;
border-radius: 2px;
}
.what-we-do h1{
padding-top: 80px;
font-family: interstate, sans-serif;
font-weight: 700;
font-size: 48px;
/*-webkit-text-decoration: underline 12px;
text-decoration: underline 12px;
-webkit-text-underline-position: under;
text-underline-position: under;*/
color: #300600;
padding-bottom: 25px;
}
.what-we-do h3{
font-family: interstate, sans-serif;
font-weight: 700;
font-size: 24px;
padding-top: 65px;
color: #300600;
}
.what-we-do p {
padding-top: 50px;
font-family: 'Merriweather Sans', sans-serif;
font-weight: 300;
font-style: normal;
font-size: 18px;
word-spacing: 0.75px;
line-height: 50px;
color: #300600;
}
#media only screen and (max-width: 600px){
.upperhr{
display: none;
}
}
<div class="what-we-do">
<div class="about-us-text">
<hr class="upperhr"> <h1>We Create </h1> <hr>
<h3>PLACES THAT INFLUENCE</h3>
<p>We design places that creates a compelling, communal, environmental, and cultural impact on individuals and communities.</p>
<h3>PLACES THAT INSPIRE</h3>
<p>We design places that encourage an impassioned and spiritual connection. We regard design to be contextual – responding to its layered history.</p>
<h3>PlACES THAT INFORM</h3>
<p>Our modus operandi leverages the competence of the entire firm to consistently produce well-informed design.</p>
</div>
</div>
I'm making a web page containing multiple titles. I have a problem and that is I can't change the font size of h3 (last one) and if I did the whole font sizes of other titles changes too. I want to know why and how to solve this.
This the code
.join_us {
width: 100%;
margin-top: 50px;
}
.join_us h3 {
font-size: 20px;
font-family: 'sans-serif';
font-weight: bold;
text-align: center;
color: #2D2D2D;
}
.join_us .create_account_container {
width: 400px;
height: 60px;
margin-left: auto;
margin-right: auto;
background-color: #0EBA00;
margin-top: 40px;
text-align: center;
}
.join_us .create_account_container a {
text-decoration: none;
line-height: 60px;
font-size: 25px;
font-family: 'sans-serif';
font-weight: bold;
text-align: center;
color: #FFF;
}
.invite_for_use_section h1 {
font-size: 28px;
font-family: 'sans-serif';
color: #000;
font-weight: bold;
text-align: center;
line-height: 40px;
margin-top: 30px;
}
.invite_for_use_section h3 {
font-size: 13px;
font-family: 'sans-serif';
font-weight: bold;
text-align: center;
color: #2D2D2D;
}
<div class="join_us">
<h3>JOIN OVER 10,000 SMART AFFILIATE MARKETERS! GET STARTED NOW...</h3>
<div class="create_account_container">
CREATE MY ACCOUNT
</div>
</div>
<div class="invite_for_use_section">
<h1>
Use Our Secret Tool and Boost Your Commissions Up to 5X More While Cutting Your Workload To Shreds!
</h1>
<br>
<h3>
Over 10,000 (and growing) People Can't Be Wrong!
</h3>
</div>
The page also contain header which contain h1 titles didn't include it because I think it has no relation to this problem.
if you want to change the font size of a specific element, try using id's. You can assign an id to an object, like this:
<h3 id = "over10">
Over 10,000 (and growing) People Can't Be Wrong!
</h3>
And to apply styling to that object, in your CSS, you can simply reference that object with a hashtag (#) with its id name, like this:
#over10 {
font-size: 33px;
font-family: 'Arial';
font-weight: bold;
text-align: center;
color: #2D2D2D;
}
I plugged it into code pen and had no problems changing the font size. The only thing I can think of is that H3 is setting a font size which might be overriding the CSS. Trying using a div instead.
I've fixed it, thnx guys, i changed the h3 to h5 and h4 ,i think css doesn't allow you to make the font size of an h3 bigger than the font of h1...
This is what my CSS looks like on the page.
<!DOCTYPE html>
<html>
<head>
<style>
p.addresscenter {
background-color: none;
color: #333;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.2;
margin: 0;
text-align: center;
white-space: pre;
}
p.endtagbold {
background-color: none;
color: #000000;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 600;
font-style: normal;
line-height: 1.2;
margin: 0;
padding-top:16px;
}
p.hoursofoperationcenter {
background-color: none;
color: #333;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 400;
font-style: normal;
line-height: 1.3;
margin: 0;
text-align: center;
white-space: pre;
}
p.infop {
background-color: none;
color: #OOOOOO;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: normal;
font-style: normal;
line-height: 1.5;
margin: 0;
padding-bottom:30px;
}
p.infostextbox {
background-color: none;
color: #OOOOOO;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 550;
font-style: normal;
line-height: 1.5;
margin: 0;
padding-bottom:16px;
}
p.topmenu {
background-color: none;
font-family: Lato, sans-serif;
font-size: 15px;
font-weight: 500;
font-style: normal;
line-height: 1.4;
margin: 0;
text-align: center;
}
p.towncounty {
background-color: none;
color: #000000;
font-family: Lato, sans-serif;
font-size: 16px;
font-weight: 700;
font-style: italic;
line-height: 1.4;
margin: 0;
padding-top:16px;
}
</style>
</head>
<body>
<p class="topmenu">Text with id tags here.</p>
There is a set of columns here made with these tags
<div class="one-half first">Text</div>
<div class="one-half"> Text </div>
Then there is more text which is formulated by <p class=""></p> and then finally the <!--nextpage--> attribute occurs somewhere in the middle.
After the <!--nextpage--> tag I have more text with <p class=""></p>
The entire page ends with
</body>
</html>
On my other pages that are not split the css shows up fine. For whatever reason the css is not showing up on page 2 after the <!--nextpage--> . What do I have to do to make sure the css shows up before and after the <!--nextpage--> attribute.
I'm not sure if I understand everything well, but You should try to place <!--nextpage--> between the tags, and not inside of them.
For example:
<p>asdasd</p><!--nextpage--><p>asdasd</p>
Is ok, while:
<p>asdasd<!--nextpage-->asdasdasd</p>
is not ok. I hope this is the case, if not, please do not downvote and update You question with full code. Then I will try to update my answer.
Few more words. When You click next page, then the paragraph element has started on the page before. So on the actual page there is no paragraph start, but only: asdasdasd</p> which is causing problems, and is not a valid html.
Best regards.
Web dev. noob here! In Chrome when I zoom out on this page, the text gets crunched up into the corner. It doesn't happen when I use Safari though. I'm assuming it's a CSS issue and/or the way I've entered it into HTML. I've put it on jsfiddle here.
.second {
font-family: helvetica neue, arial, sans-serif;
font-size: 30px;
font-weight: lighter;
line-height: 5px;
position: relative;
top: 5px;
width: 500px;
margin-left: -330px;
}
.third {
font-family: helvetica neue, arial, sans-serif;
font-size: 40px;
font-weight: lighter;
line-height: 0px;
position: relative;
top: 5px;
margin-bottom: 70px;
width: 500px;
margin-left: -330px;
}
.fourth {
font-family: helvetica neue, arial, sans-serif;
font-size: 20px;
font-weight: lighter;
line-height: 0px;
position: relative;
top: 30px;
width: 500px;
margin-left: -335px;
background-color: white;
<p class="second"><b>Barter</b> a textbook <b>you have</b></p>
<p class="second">for a textbook <b>you want</b></p>
<p class="second">with a fellow <b>Aggie</b> on campus,</p>
<p class="third"><b><i>now</i></b>.</p>
margin-left: -330px;
because you are using negative margin thats why it hide in the screen
and also your link is working fine in my chrome
This might be a stupid question, but it has been troubling me a lot.
I have made 4 boxes and each box should have the text starting from a same line, but sometimes (when the text is less), it starts from the bottom.
Here's the image displaying it:
Ideally, it should start from the top and go till the bottom. Like this:
What changes should I make in my CSS code?
CSS :-
.show-text {
margin-left: 264px;
float: left;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-2 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-3 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
.show-text-col-4 {
display: inline-block;
margin-left: 20px;
font-size: 15px;
width: 15em;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #606060;
}
My JSFiddle :- http://jsfiddle.net/xa0obvyr/
Because you are using inline-block, you need to specify vertical alignment if the default value doesn't suit you. In this case, you need
show-text-col-4 {vertical-align: top;}
However, your setup is less than ideal. Rather than floating the first time with a large left margin, I'd recommend you use a centered wrapper element instead, and style each of the columns in the same way.
This is what you need? with one CSS class and automatic 1/4 width of each column.
Please check the demo: http://jsfiddle.net/sk1rqxeo/
.show-text-col {
float: left;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
line-height: 18px;
color: #606060;
width:24.5%;
display: inline-block;
}
You will need to set width to <p> tag
FIDDLE DEMO
.show-text-col-3 p{
width:200px;
}