I cant style a certain text smaller

HTML & CSS
1

**edited to include problematic html and css

Hi all,
new here. Very frustrated with this css. I used to design websites a lot but i am evidently out of practice. trying to make a new artist website. basically, i have a div that have the images which scroll downward, on top of that i have two divs, one for the project name, and one for a “<” symbol back to the splash page. I’m trying to add a smaller line of text below the project name to say “(ongoing)” It looks like this right now because i cant figure out how to make that text smaller:

1911×846 208 KB

So the images scroll, but the text elements stay put. Im using fixed divs for the text on top of the container. I’m trying to make the text below the project name much smaller, so it doesnt obstruct the images.

I cant seem to make it work, the text will not change size, and stays the same as the parent element. Here is my css (for the entire document) :

body{
color: #000000;
margin:0;
}

.tiny a:link {
text-decoration:none;
color: white;
}
.tiny a:visited {
text-decoration:none;
color: white;
}
.tiny a:hover {
text-decoration:underline;
color: white;
}
.tiny a:active {
text-decoration:none;
color: white;
}

.title{
position:fixed;
top:50px;
left:200px;
width: auto;
height:auto;
margin: 0;
padding:0;
z-index:3;
font-family: 'Herr Von Muellerhoff', cursive;
font-size: 272px;
font-weight: normal;
color: white;
text-shadow: 4px 4px 8px rgba(0,0,0,0.3)   
}

.small{
font-family: 'Herr Von Muellerhoff', cursive;
font-size: 92px;
font-weight: normal;
color: white;
text-shadow: 4px 4px 8px rgba(0,0,0,0.3)   
}

.tiny{
font-family: ‘Herr Von Muellerhoff’, cursive;
font-size:410px;
color: white;
text-shadow: 4px 4px 8px rgba(0,0,0,0.3);
position:fixed;
bottom:50px;
right:200px;
width: auto;
height:auto;
margin: 0;
padding:0;
z-index:4;
}

.container{
width: 70%;
margin-top:0;
margin-left: auto ;
margin-right: auto ;
padding:0;
z-index: 2;
}

.container img{
width: 100%;
border: 0;
}

and here is my html(minus the head section).:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css"  href="http://mikegoldby.com/desktopcss.css" />
    
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="http://mikegoldby.com/mobilecss.css" />

<link href="https://fonts.googleapis.com/css?family=Herr+Von+Muellerhoff|Kite+One" rel="stylesheet">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>mike goldby</title>
</head>
<body>
<div class="title">Lunch Break<br />
    <div class="small">(Ongiong)</div></div>
<div class="tiny"><a href=""><</a></div>

<div class="container">
<img src="http://mikegoldby.com/doc/lunchbreak/1.jpg" border="0" /><br />
<img src="http://mikegoldby.com/doc/lunchbreak/2.jpg" border="0" /><br />
<img src="http://mikegoldby.com/doc/lunchbreak/3.jpg" border="0" /><br />
<img src="http://mikegoldby.com/doc/lunchbreak/4.jpg" border="0" /><br />
<img src="http://mikegoldby.com/doc/lunchbreak/5.jpg" border="0" /><br />
</div>

</body>

Is my coding totally fucked? ive tried to simplify it but i cant figure this out.

please help and dont make me feel terrible for bad coding lol! thanks

2

If you don’t include the problem element it will be difficult to show how to correct it.

Although having different sized text is a normal everyday thing in css, so should be simple enough to solve.

Give the sub-element a class and style that.

I have other recommendations for improvement, but I’m out of time right now. :slight_frown:

3

ill edit the original page to show how i was trying to do it.

4

When posting a new problem, please post a valid “working page”. IE, include the <doctype> and <head> sections, etc, so the page will work when we run it on our computers - we should see what you see.

Thank you

Note: the trailing slash on empty elements in not needed in HTML. The strict format is a requirement for XHTML pages but has never been required for HTML (although Netscape gave it a try).

If you are using local paths to source images or fonts, you will need to include the fonts or images with your post or change the relative URLs to full URLs (start with http(s)) so the resources can be accessed.

Please check our Forum Posting Basics for more info.

5

edited

6

The text ‘ongiong’ (sic) is smaller in the code you posted and looks like the screenshot below.

1273×810 67.8 KB

What problem are you having exactly (apart from spelling :slight_smile:) ?

(As an aside note that the page title should be an h1 tag and not a div styled to look like a heading. Also border=“0” is deprecated representational attribute and should be done in css instead.)

7

We will tell you what we see and what we recommend. How you feel about your coding and what you choose to do to improve yourself is up to you.

The harshest criticism I can levy is that I cannot understand how your page is supposed to work or how it is supposed to behave. It looks like you copied and pasted parts of an old web page. It does not look like you have ever taken a basic HTML and CSS course. You need to take a class from start to finish.

Since I don’t understand how your page is to function, I rewrote your code and placed the images in separate containers. I could not see the purpose of the less-than symbol “tiny” (anchor?) so I did not try to keep it. Likewise I didn’t understand the reason for the foreground images, so I coded the images as background images and placed the title and text on top of them. Probably not your intent, but it’s a place to start.

Separate style sheets for mobile and desktop is usually unnecessary. Too much duplication. Compare yours to my CSS at the top of the page.

XHTML is a thing of the past. I used a modern HTML level 5 doctype and associated code.

JavaScript code is usually preferred for mobile devices since touch devices may not support :hover and CSS alone does not support drop down menus without hover very well at all.

You can look up all of the properties and their options on line.

I am including a “working page”. It starts with <!doctype>, ends with </html> and contains complete <head> and <body> sections. You can copy it to a file, give it an html suffix and run it on your computer as is then provide feedback based on what you see versus what you want.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!--
    <link rel="stylesheet" href="http://mikegoldby.com/xdesktopcss.css">
    <link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="http://mikegoldby.com/xmobilecss.css">
-->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Herr+Von+Muellerhoff">
    <title>font-size mikegoldby+ron</title>
<!--
https://www.sitepoint.com/community/t/i-cant-style-a-certain-text-smaller/291632
    font-family: ‘Herr Von Muellerhoff’, cursive;
    <img src="http://mikegoldby.com/doc/lunchbreak/5.jpg" alt="" width="" height="">
-->
    <style>
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
body {
    margin:0;  /* deletes default body margins */
}
.outer {
    width:90%;
    max-width:1000px;
    margin:0 auto;
}
.container {
    background-position:50% 50%;  /* background images are centered horizontally and vertically in the container */
    background-size:cover;  /* background images will cover the container; overflow is cropped */
    padding:1em 5%;
    margin:1em 0;  /* margin-top and bottom 1em  added to separate images for this demo. Can be removed.  */
}
.one {
    background-image:url("http://mikegoldby.com/doc/lunchbreak/1.jpg");
}
.two {
    background-image:url("http://mikegoldby.com/doc/lunchbreak/2.jpg");
    background-position:50% 0;  /* this background image is centered horizontally, & top vertically in the container */
}
.three {
    background-image:url("http://mikegoldby.com/doc/lunchbreak/3.jpg");
}
.four {
    background-image:url("http://mikegoldby.com/doc/lunchbreak/4.jpg");
}
.five {
    background-image:url("http://mikegoldby.com/doc/lunchbreak/5.jpg");
}

h1 {
    color:#fff;
    font-weight:normal;
    font-size:12em;
    font-family:'Herr Von Muellerhoff',cursive;
    text-shadow:4px 4px 8px rgba(0,0,0,0.5);
    text-align:center;
    margin:0;
}

.about {        /* box with dashed line */
    border:1px dashed #fff;
    border-radius:8px;
    padding:0 1em;
}

p {
    color:#fff;
    font-size:1.125em;
    line-height:1.4;
}

/*  anchors  */

a:link,
a:visited {
    color:#fff;
    text-decoration:none;
}
a:hover,
a:focus {
    text-decoration:underline;
}
a:active {
    text-decoration:underline;
}

/*  media queries */

@media screen and (max-width:1000px) {
    h1 {
        font-size:20vw;
    }
}

    </style>
</head>
<body>

<div class="outer">
    <div class="container one">
        <h1 class="title">Lunch Break</h1>
        <div class="about">
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
        </div>
    </div>
    <div class="container two">
        <h1 class="title">Lunch Break</h1>
        <div class="about">
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
        </div>
    </div>
    <div class="container three">
        <h1 class="title">Lunch Break</h1>
        <div class="about">
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
            <p>(about lunch break)</p>
        </div>
    </div>
    <div class="container four">
        <h1 class="title">Lunch Break</h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
            <p>Duis eget lorem ac odio lobortis suscipit nec et neque. Sed at quam ut mauris scelerisque congue id eget dui. Quisque tellus lectus, tristique eu posuere in, faucibus vitae urna. Duis vitae orci purus, quis euismod augue. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Morbi lorem arcu, aliquet sed feugiat et, posuere non elit fusce sollicitudin. Nunc at in hendrerit in vulputate, imperdiet fringilla.</p>
            <p>Aliquam mauris felis, viverra in mattis vitae adipiscing elit, sed diam nonummy nibh. Euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue. Proin dapibus hendrerit purus sed dictum.</p>
            <p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Suspendisse vel tortor non dolor, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.Cras a nisl nec enim luctus vehicula eu magna aliquam erat volutpat.</p>
            <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
            <p>Donec pellentesque, lacus in venenatis suscipit, mi arcu consectetur leo, vulputate congue dolor eros ut sapien. Mauris erat quam, amet convallis ac, vulputate ultricies orci. Vestibulum porta iaculis felis, eget tristique ante egestas quis. Sed non quis, convallis felis. Etiam id elit id elit dapibus blandit.</p>
            <p>Phasellus nec erat nibh, id convallis orci, consectetuer adipiscing elit. Maecenas sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat. Aenean placerat sem sit amet odio. Vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim. Lorem ipsum qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla eu mattis facilisi.</p>
            <p>Proin enim sapien, augue duis dolore eu, bibendum fermentum nunc. Mauris viverra erat a ipsum facilisis eu tristique turpis luctus. Ut consectetur condimentum justo et imperdiet. Nullam urna urna, luctus non lacinia nec, tincidunt non odio. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <p>Vivamus nec nisl eu odio fringilla facilisis. Aliquam elementum accumsan nulla, eget congue orci laoreet eu. Aliquam sit amet urna ante, ut luctus justo. Suspendisse mollis convallis sed convallis penatibus lorem. Dolor suspendisse pretium vitae nunc viverra ornare etiam. Ligula id nulla vel orci.</p>
    </div>
    <div class="container five">
        <h1 class="title">Lunch Break</h1>
    </div>
</div>

</body>
</html>
1 Like
8

It appears to be a “back button” linking back the the “splash page”.
Of course the less-than symbol must be encoded as &lt; in html because that symbol itself has a special purpose in html.

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.