I have a rogue bit of code for a simple paragraph that for some reason does not shrink when viewed on mobile phones.
Font size is set at 14px, yet on a phone, it displays large while the rest of the site's text is reduced to fit.
Am i missing something? Here's the page http://www.dantecreative.com/Peter
Also, on phones there is a big gap on the right hand side when view on mobile and the footer and header don't cover from left to right like they do on desktop.
Here's the CSS in question-
#main #mainblack #petetext p {
color:#FFFFFF;
font-size:14px;
margin-left: 60px;
font-family:Verdana, sans-serif;
line-height: 21px;
}
and the HTML
<div id="petetext">
<h1>Why Peter? Why not!</h1>
<p>
Initially attracted here by a passion for mountain biking and skiing, Dave has grown to love Whistler for so much more – it’s incredible community of positive people who live life to the fullest. This community, coupled with Whistler’s beautiful mountains and natural environment, give this world-class resort an indescribable energy, rivaled by no other. Dave has combined this passion with knowledge, experience and effective communication and negotiating skills to become one of Whistler’s top producing agents.
</p>
<p class="blue">
....................................................................................................................................
</p>
Hope someone can help. As usual, i'm sure it's something simple.
body {
-webkit-text-size-adjust: 100%;
}
As Nick said you should not need that chain IDs. If what you want is to add some style to contained in id petetex, you just need in your css: #petetex p
You can check this on this jsfiddle file1. It works on mobile phones as well. Good luck!
#petetext p{
color:red;
font-size:16px;
margin-left: 60px;
font-family:Verdana, sans-serif;
line-height: 21px;
}
Related
I am learning HTML and CSS and I produced this code regarding the float property.
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;
}
<!DOCTYPE html>
<html>
<head>
<title>Using Float to Place Elements Side-by-Side</title>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
<p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
Now, my question is this -
Why does the fourth paragraph id="four" come under the third paragraph id="three" rather than moving to the left hand edge?
float: left; will use every bit of free space available to make sure no space is wasted. You can see this in your example. The 3rd column has free space below, so the 4th column places itself there.
I think you're looking for display: inline-block; with a vetical-align: top; instead of a float: left; for a nice result. See the example below.
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
margin: 5px;
padding: 5px;
background-color: #efefef;
display: inline-block;
vertical-align: top;
}
<!DOCTYPE html>
<html>
<head>
<title>Using Float to Place Elements Side-by-Side</title>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
<p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
It's because you don't have the clear property specified. From MDN:
The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them.
body {
width: 750px;
font-family: Arial, Verdana, sans-serif;
color: #665544;
}
p {
width: 230px;
float: left;
margin: 5px;
padding: 5px;
background-color: #efefef;
}
#four {
clear: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Using Float to Place Elements Side-by-Side</title>
</head>
<body>
<h1>The Evolution of the Bicycle</h1>
<p id="one">In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.</p>
<p id="two">The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the ground in a gliding movement.</p>
<p id="three">It was not seen a suitable for any place other than a well maintained pathway. </p>
<p id="four">In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden structure made it extremely uncomfortable. </p>
<p id="five">In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
<p id="six">Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its predecessor.</p>
</body>
</html>
I've searched the forums but the only answers I'm getting cover issues about the font looking bold or having jaggedy edges.
My h1 #font-face font is displaying at the BOTTOM of my page in Chrome and Safari as of today. I have no idea why. It was fine before.
A good page example to look at is https://www.beatnikbreaks.com/about-us/ - have a look in Chrome and then in Firefox. Firefox displays it at the top as it should be.
Chrome loads it at the top first, then it suddenly jumps to the bottom.
My CSS for the font is:
#pagecontent h1{
margin-top: 0px;
color: #b9b9b9;
font-family: 'lucky_typewriterregular',Times,serif;
font-size: 40px;
font-weight: normal;
line-height: 44px;
letter-spacing: 1px;
margin-left: 0px;
float: left;
text-align: left;
width: 1000px;
}
The HTML is:
<div id="pagecontent">
<p></p>
<h1>About Beatnik Breaks</h1>
<h2>About Beatnik Breaks - Large luxury holiday short term rental in Brighton, ideal for holiday letting and stag & hen party accommodation</h2>
<p></p>
<p>We're a little bit shy... some details about us will follow. Or if there's something specific you want to know, then give us a call or <a class="highlight" href="contact-us">email us</a>...
</p>
<p></p>
</div>
I did update my Wordpress very recently, but I can't see why this would have suddenly done this.
Any help would be hugely appreciated
Thanks in advance
I think can be a problem realted to float, try to add float at pagecontent (the actual container of h1)
#pagecontent{
float:left;
}
So my footer won't stay down. It just appears on the middle of my page. I bet you've seen this question a lot of times but I really need some help since I've read tons of threads and I've tried the general solution outlined here:
http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
I will link my code and hopefully you can notice why the solution doesn't work for me.
HTML:
<!DOCTYPE HTML>
<HTML>
<header>
<title>Heilsa</title>
<link type="text/css" href="stylesheet3.css" rel="stylesheet"/>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</header>
<body>
<div id="container">
<img id="bordi" src="taka2.png"/>
<div class="menu">
<ul>
<li>Heim</li>
<li>Hollt Mataræði</li>
<li>Reynslusögur</li>
</ul>
</div>
<div id="content">
<div id="block">
</div>
<div id="meginmal">
<h1>Fyrirsögn</h1>
<p>A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can create a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information. But who cares. The information/junk inside a wall of text are usually related to wherever the wall of text is located, but the best walls of text, which are actually the most irritating, most eye-bleeding ones, are completely random. Walls of text usually make the reader asplode or have their eyes bleed and fall out of their sockets. A number of people can stand it, but not read them. Actually some people can stand and read them. Those people do not have short attention spans. These are boring and patient people who have no life or have all the time in their hands, which are the same, but not really. The punishment of what making walls of text varies of the strictness of the community. But it doesn't really matter. Nobody cares. Walls of texts should be free of links, different font colors, strange characters, which are those other symbols used in society, and capital letters because it ruins the whole purpose of the infamy of walls of texts. It makes them look dumb and weird. Walls of texts are obviously free of huge spaces and outstanding things like capital letters. Of course, paragraphs should never be in a wall of text. Walls of text are known to create nausea, confusion, head explosion, and others. The others being something I can not think of either because I am lazy or if I do not feel like it or I can not actually think of anything. Like what the fuck? That was a rhetorical question right there. What the fuck? You are actually not requesting a satisfactory answer, you just say that because you try to be funny or you feel like it or if you are pissed off. You must get a proper bitch-slapping to stop making walls of text, but if you are weird then that doesn't apply to you. Walls of text are defeated by deleting them or splitting them into paragraphs. Or some other things that would work but will take hours to think of. People are considered a nuisance if they create walls of text. This might be the end. If you hope this is the end, I am not sure. But if I was not sure then I wouldn't be talking. I should know. Or should I? The best way to make a better and good wall of text is to copy and paste what you previously typed or write. Hey, that reminds me. Walls of text aren't always on the internet! They could be anywhere that is able to produce symbols. D'oh. A wall of text is something that is frowned upon in most, actually virtually all Internet societies, including forums, chat boards, and Uncyclopedia. You should not make walls of text because it can get you banned anywhere unless it is a place that encourages walls of text. I highly doubt any place does support something so irritating and annoying, but anything can exist, but not really because unless you are in heaven then that can happen. But no one actually knows that was just a hypothesis, a lame one that is. Actually not really lame. You can created a wall of text supporting site, but you would be hated if you do that, so do not. But you can if you like, but I discourage that. Now on to the actual information of walls of texts. The wall of text was invented when the Internet was invented, but actually it was slow at that time. So whenever it became fast. But there would need to be some free or not free community for people, and that community would be able to have walls of text. But that community probably wouldn't have actually invented the wall of text. So basically, no one except God and Al Gore knows when or where or how the wall of text existed/was invented. Noobs probably invented, but probably not. Who knows. Walls of texts are usually filled with a lot of useless information and junk. Information and junk can be the same, but only if the information is junk or the junk is information.
</p>
</div>
</div>
<div id="wrapper">
<img id="undir" src="undir.png"/>
</div>
</div>
</body>
</HTML>
CSS:
body, html {
margin: 0;
padding: 0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
.menu {
width:550px;
height:35px;
font-family:Trajan Pro;
font-size:18px;
text-align:center;
font-weight:bold;
text-shadow:3px 2px 3px #333333;
margin-left:1010px;
position:absolute;
top:150px;
}
.menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
list-style-type: none;
}
.menu li {
display: inline;
padding: 20px;
}
.menu a {
text-decoration: none;
color:white;
}
.menu a:hover {
text-shadow: 8px 5px 8px #333333;
font-size:20px;
}
#content {
min-height:100%;
position: relative;
width: 800 px;
height: 800px;
margin-right:200px;
margin-left:200px;
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#block1 { /*IGNORE THIS. I AM SAVING IT FOR LATER*/
background: red;
filter:alpha(opacity=20); /* IE */
-moz-opacity:0.2; /* Mozilla */
opacity: 0.2; /* CSS3 */
position: absolute;
top: 0; left: 0;
height: 100%; width:100%;
border-radius: 20px;
margin:10px;
}
#meginmal {
padding: 20px 30px 20px 30px;
text-align: center;
font-size:20px;
border-right: solid;
border-left: solid;
font-family: Trajan Pro;
}
#bordi {
height:100%;
width: 100%;
margin: 0%;
padding: 10px;
}
#wrapper {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
From your code, you have footer as id wrapper
Change the position from absolute to fixed
#wrapper {
position: fixed;
}
I have a website. In Chrome and Internet Explorer there is white space that interrupts the flow of text. I don't know where they come from.
I need help finding them and deleting them.
You can view the full page here: http://printingunlimited.com/business-card-info.htm
HTML code:
<div id="about-product">
<h3 itemprop="description">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3>
<img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"/>
</div>
The CSS that defines about-product handle:
#about-product {padding: 0 0 20px 0; height: 200px;}
img.product-image {display:block; position:absolute; left:560px; top:-5px; }
#about-product h2 {float:left;}
#about-product h3{display:block; font-size:16px; font-weight:normal; padding-bottom:5px; padding-right:5px; width:550px;}
Image pointing out the problem area:
Where does the white space between (your business cards are printed) and (on 14 point card stock) come from?
After some tweaking, this works:
#about-product {
padding: 0 0 20px 0;
height: 180px;
}
#about-product h3 {
display: inline-block;
font-size: 16px;
font-weight: normal;
float: left;
width: 550px;
position: absolute;
}
Try this:
.header-content {
width: 860px;
margin: 0 auto;
height: 190px;
position: relative; /* <~ add this line */
}
ul#drop-nav {
display: block;
float: none;
margin: 0 auto;
position: absolute; /* <~ change this line */
top: 170px; /* <~ change this line */
}
The strategy you should be using to solve these errors yourself is divide and conquer, as follows:
Remove all the html attributes and CSS styling that affects that particular HTML element.
Add back the html elements, in chunks, testing as you go, to see how each addition affects the page.
When you find the problem appear, cut the last batch of changes you made in half, to isolate which style is causing the problem.
When you locate the CSS attribute interrupting your flow of text, remove it or try something different.
All right, so as people have already suggested, your CSS styling is not suitable for IE and chrome. First, you must validate it at W3.
Next, i have added some styling to it to correct it .
Here they are :
<div id="about-product" style="height: 175px">
<h3 itemprop="description" style="display:inline-block;float: left;position: absolute;">Business cards are often the first impression people get of your business. With Printing Unlimited you can make sure your business cards portray professionalism and uniquely position your business in your customers mind. Your business cards are printed on 14 point card stock with a gloss or matte finish with the standard size of 2" x 3.5". Business cards can include many options: rounded corners, custom shapes, and 14 point, 16 point, and recycled paper. If you have a design ready </h3>
<img itemprop="image" src="example-business-card.png" alt="Business Card Examples" class="product-image"> </div>
The screen shot is here below:
On this page: www.incfilms.net/services, my goal is to make that Advertising and Consulting picture move to the right side of that paragraph.
The main page has:
<div class="serviceinfo">I am Not a Communist is now proud to offer a new range of digital video and media services to you and your business. We're calling it INC Pro.
<p>We are able to meet and focus with our clients on finding customizable solutions that are specific to their exact needs and objectives.
<p>We encompass the expertise and capabilities to create professional quality media; offering a number of services ranging from pre
through post production consultation, shooting and capturing, editing, color matching, audio leveling and digital mastering.
<p>Please contact us for a quote or more information at <?php echo $adminemail; ?> or call at <?php echo $phonenum; ?>.
</div>
<!--ADVERTISING AND CONSULTING LOGO -->
<div class="adconsul"><img src="media/advert.png" width="350" height="120"/></div>
And the CSS sheet has:
.serviceinfo {
width: 600px;
text-align: left;
clear: both;
color: white;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
}
.adconsul {
width: 350px;
float: right;
margin: auto;
color: white;
padding-bottom: 100px;
}
I probably shouldnt be using the float right, but is there a way I can get that picture to the right of the paragraph and keep the footer at the bottom? Thank you
Try putting a float: right in the .serviceinfo class
you'll want to use the following after floating divs
<div style="clear:both;"></div>