body {
margin:0;
padding:0;
box-sizing:border-box;
}
.about-title {
background-color: #fc0321;
color:#ffffff;
padding: 5px;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
text-align: center;
border-radius: 100px;
}
#media only screen and (max-width:400px) {
.about {
width:100%;
}
}
<div class="about">
<h3 class="about-title">Welcome to Mahasakthi Harvester Spares</h3>
<p style="font-weight: 200;">MAHASAKTHI HARVESTER SPARES, established in the year 2017 by high end professionals in the field of Combine Harvester Manufacturing and Repairing. We are leading wholesaler, retailer and manufacturer of combine harvester spares dealing in Standard,Balkar,Kartar,Preet and Claas Combine Harvesters.Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares.</p>
Read More...
</div>
In the above code I tried for the responsive design but i'm not getting it.
I mentioned width as 87% for the desktop screens and then I changed the width to 100% for the smaller screens.But the width is not changing.I'm having trouble with this.
<head>
<style>
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.about-title {
background-color: #fc0321;
color: #ffffff;
padding: 5px;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
text-align: center;
border-radius: 100px;
}
//--------------
.about {
width: 87%
}
//--------------
#media only screen and (max-width:400px) {
.about {
width: 100%;
}
}
</style>
</head>
You didn't write the default width value in your code
Here is the example that #AFF did in a snippet. As you can see it is working. If you are still having issues, then there is likely some conflicting CSS that is overriding your CSS. Please try and reproduce the issue you are having in a snippet using the width:85% for desktop widths, so we can help with your specific issue.
If seeing this working example helps solve your issue, then please accept #AFF answer.
body {
margin:0;
padding:0;
box-sizing:border-box;
}
.about-title {
background-color: #fc0321;
color:#ffffff;
padding: 5px;
font-family: 'PT Sans Narrow', sans-serif;
font-weight: 400;
text-align: center;
border-radius: 100px;
}
.about {
width:85%;
}
#media only screen and (max-width:400px) {
.about {
width:100%;
}
}
<div class="about">
<h3 class="about-title">Welcome to Mahasakthi Harvester Spares</h3>
<p style="font-weight: 200;">MAHASAKTHI HARVESTER SPARES, established in the year 2017 by high end professionals in the field of Combine Harvester Manufacturing and Repairing. We are leading wholesaler, retailer and manufacturer of combine harvester spares dealing in Standard,Balkar,Kartar,Preet and Claas Combine Harvesters.Our Product ranges from Machined spares, Fabricated spares, sheet metal spares, Rubber spares,Shafts,Bearings,Belts, Oils ,Grease,Filters,Rubber Tracks,Rollers,Sprockets to all miniature spares.</p>
Read More...
</div>
Related
I am working on a media query example in my boot camp. My media query does not seem to function on my page. Can anyone tell me why? I have reviewed it with my classmates, and after thirty minutes of review we have not been able to find the answer after looking at examples online. Any help would be greatly appreciated.
body {
background-color: lightblue;
text-align: center;
list-style-position: inside;
}
.banana {
height: 300px;
width: 300px;
}
.thick-white-border {
border-color: white;
border-width: 15px;
border-style: double;
}
.smaller-image {
width: 300px;
height: 600px;
border-radius: 55px;
}
.green-background {
background-color: green;
}
h1 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h2 {
font-family: fantasy;
}
ul {
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
#media screen and (min-width: 0px) and (max-width: 400px) {
ul { color: green; } /* show it on small screens */
}
<!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="./css/index.css">
<title>About Me 02</title>
</head>
<body>
<H1 class="font-family">I am Lashonda Miller</H1>
<img src="./bananaGirl.jpg" alt="This is my selfie" class="thick-white-border smaller-image ">
<H2 class="font-family">This is me, inside of a banana.</H2>
<ul class="font-family">
<li>I am 17 years old, and I've just graduated high school</li>
<li>I'm also a certified Medical Assistent and an EKG Technician</li>
<li>I've been to LA before, it's a cool city, very slow traffic</li>
<li>My favorit food to eat it crab legs</li>
<li>I love scary movies</li>
<li>I also think everyone should go to Cedar Point</li>
<li>I also like pumpkin seeds</li>
</ul>
<a href="https://www.linkedin.com/in/lashonda-miller-91723b1b1?lipi=urn%3Ali%3Apage%3Ad_flagship3_profile_view_base_contact_details%3B37AWsTN%2BQJ%2BVJr7bGFE%2F2A%3D%3D" target="_blank" alt="This is my linkedin profile">Come check my linkedin account
</a>
</body>
</html>
So it looks like your media query was set up for small devices, you could try increasing the max-width to 800px or more #media screen and (min-width: 0px) and (max-width: 800px) { ul { color: green; } }
Trying to update CSS so that the headline adapts and becomes smaller when viewing mobile. Might be missing something or there's some other CSS that controls it but not sure where.
I've tried looking up various code, but testing it locally, still not getting desired result.
HTML
<div class="col-12 col-md-auto cta-headline">
<h2><span class="cta-headline">SIGN UP!</span></h2>
</div>
CSS
.cta-headline {
color: $white;
font-weight: 800;
font-family: "Gilroy", "Helvetica", Helvetica, arial, sans-serif;
font-size: 25px;
letter-spacing: 3px;
margin-bottom: -15px;
margin-top: -20px;
#media only screen and (min-width: 450px) and (max-width: 959px) {
.cta-headline { font-size: 10px;
}
}
}
I'd like the text to just scale appropriately down when viewing mobile compared to desktop.
Are you using Sass? Because CSS you shouldn't be nesting media queries inside the class. Just move the media query to its own line and it should work.
The min & max width is also redundant, it's much better to just remove the min and keep the max. If the width goes below 450px, create another media query where the max width is 450px
.cta-headline {
color: $white;
font-weight: 800;
font-family: "Gilroy", "Helvetica", Helvetica, arial, sans-serif;
font-size: 25px;
letter-spacing: 3px;
margin-bottom: -15px;
margin-top: -20px;
}
#media only screen and (max-width: 959px) {
.cta-headline { font-size: 10px; }
}
I am trying to create my first website from scratch using HTML/CSS. The problem I am having is that text I have on a page exceeds the bounds of the background image and when I scroll downwards, the container (.violence) seems to stop displaying the linear-gradient and moves on to a white background. Is there any way I can extend and fit the gradient to match the amount of text I put in?
Thanks in advance.
I have tried searching the web for solutions but my lack of knowledge and understanding of HTML/CSS have prevented me from resolving the issue.
* {
margin: 0;
padding: 0;
}
header {
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(background.jpg);
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100%;
}
.main-nav {
float: right;
list-style: none;
margin-top: 30px;
}
.main-nav li {
display: inline-block;
}
.main-nav li a {
color: white;
text-decoration: underline;
padding: 5px 10px;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
}
.main-nav li.active a {
border: 1px solid white;
}
.main-nav li a:hover {
border: 1px solid white;
}
.logo img {
width: 150px;
height: auto;
float: left;
}
body {
font-family: monospace;
}
.row {
max-width: 1200px;
margin: auto;
}
.welcome {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 425px;
}
h1 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 50px;
text-align: center;
margin-top: 0px;
}
h2 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 22px;
text-align: center;
margin-top: 0px;
}
.violence {
position: absolute;
width: 1200px;
margin-left: 375px;
margin-top: 75px;
}
h3 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h4 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 25px;
}
h5 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h6 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h7 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
h8 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-size: 15px;
text-align: left;
margin-top: 0px;
}
h9 {
color: white;
font-family: "Trajan Pro", sans-serif;
font-style: italic;
font-size: 20px;
text-align: center;
margin-top: 0px;
}
<html>
<head>
<title>The Quest for Arrakis: The Second Imperial Renaissance</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="logo.png">
</div>
<ul class="main-nav">
<li> HOME </li>
<li class="active"> GAME SETTING </li>
<li> CHARACTERS AND ENTITIES </li>
<li> WRITING SAMPLES </li>
<li> GAME FEATURES </li>
<li> JOIN </li>
<li> CONTACT US </li>
</ul>
</div>
<div class="violence">
<h3>
<p>"There is no escape—we pay for the violence of our ancestors." <br>- Frank Herbert, Dune</p>
</h3>
<h4>
<p>Quest for Arrakis II continues the decade long history and political machinations of the original Quest for Arrakis. It is an intense setting that stays true to the canon as set forth by Frank Herbert and focuses primarily on power politics and
grand story telling. Much like the in the novels most anything is possible…if the player is willing to pay the right price.</p><br>
<p>The setting is an alternative universe to the world as designed by Frank Herbert and taking place some twelve centuries before the time of Paul Atreides. The Corrino Empire has suffered through a devastating war which has taken the life of the
previous Emperor and plunged the human race into a period of economic collapse and massive social unrest. Old houses have fallen or been reduced in power leaving a vacuum for the ambitious to make a name for themselves. Under the watchful eye
of a new soverign the Empire begins the long road back to prosperity. New houses seek to establish themselves as old ones try to return to glory.</p><br>
<p>We offer an intense gaming atmosphere with motivated players, helpful staff and well detailed game environment. Everything is story driven and the opportunities are endless for writers willing to be active. Will you raise your banner in this brave
new age? The perils are daunting and the road will be hard but do you have what it takes to rise to power in the Quest for Arrakis II?</p>
<h5><br>
<p>"Beginnings are such delicate times." <br>-Princess Irulan</p>
</h5>
<h6><br>
<p>In the Year 8760 A.G., The Imperium has emerged from a devestating conflict known as The Second Muadru Incursion. Houses have fallen, and widespread economic collapse have devastated the fortunes of the Houses of the Imperium. As the Empire
returns to glory beneath the Rule of Padishah-Emperor Ezhar the Seventh, Houses New and Old seek to stablise themselves in a turbulent epoch of Imperial History with plenty of opportunity to do so.</p>
</h6>
<h7><br>
<p>"Control the coinage and the courts - let the rabble have the rest." Thus the Padishah Emperor advises you. And he tells you; "If you want profits, you must rule." There is truth in these words, but I ask myself: "Who are the rabble and who
are the ruled?"<br>-Princess Irulan</p>
</h7>
<h8>
<p><br>The Quest for Arrakis II offers many paths to power.</p>
<p><br>The Landsraad acts as the Political Hub of the Imperium with the Houses and Players generating most of our Game's Laws and Rule Sets.</p>
<p><br>If economics piques your interest, then CHOAM serves as the legislature that defines the economic fortunes of the Empire with its Board of Directors governing In Character Policy.</p>
<p><br>If it is the Favour of the Corrino that drives your ambitions, then the Court of the Emperor will provide you with the opportunity to make a name and reputation for yourself beneath the watchful eye of the Emperor.
<p><br>Regardless of the path you choose, all roads leads to Arrakis and the fortunes that lie hidden beneath its sands, guarded by Fremen and Worm alike. The journey will not be easy but with enough patience, perseverance and determination,
you may one day rule the Desert Planet and harness the riches and power for yourself!</p>
</h8>
<h9>
<p><br>"One must always keep the tools of statecraft sharp and ready. Power and fear –sharp and ready." <br>- Baron Vladimir Harkonnen</p>
</h9>
</div>
</header>
</body>
</html>
I expect the text to continue being visible.
Your question was too vague but I still tried so here is my answer for you.You should apply the background-image property to the violence class itself instead of the header class.
I understand you are new to HTML/CSS but you should check on the web for quality resources to learn the languages as well as best practises.Your code has very basic errors which should not be there.
HTML has heading tags <h1> to <h6> but you have used headings tags beyond that which HTML does not recognise or support.
From what I can see you have used headings tags for styling purposes which is wrong.In this case you should remove all the heading tags except <h3> which is actually used as a heading.
I can also see your knowledge about semantic tags is shallow so it would be better if you spend a little time reading about them.
I have below for my code. It is posting it on my entire webpage instead of just on that image and I can't quite figure out why.
dt {
font: Arial, Helvectica, sans-serif;
size: .9em;
weight: bold;
color: (dark red (#6b1101);
line-height: 2em;
}
dd {
font: Arial, Helvectica, sans-serif;
size: .9em;
weight: bold;
color: (dark red (#6b1101);
line-height: 2em;
}
#Wrapper {
width: 700px;
text-align: left;
margin: auto;
background-color: #F7EED7;
}
#imgtop {
width: 700px;
}
#leftnav {
background-color: #F7EED7;
padding: 10px;
float: left;
width: 150px;
}
#leftnav a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #000033;
text-decoration: none;
text-indent: 0px;
display: block;
}
#leftnav a:visited {
font-family: Arial, Helvetica, sans=serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #660066;
text-decoration: none;
text-indent: 0px;
display: block;
}
#leftnav a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
color: #000033;
text-decoration: none;
text-indent: 0px;
display: block;
background-color: #CCCCCC;
}
body {
background-color: #FFFFFF;
}
#maintext {
background-color: #F7EED7;
float: right;
width: 500px;
padding: 10px;
}
h1 {
color: red
}
<!doctype html>
<head>
<title>Cafe Townsend: Wine Tasting Terms </title>
<link type="text/css" rel="stylesheet" href="cafe.css">
<meta charset="utf-8">
</head>
<div id="leftnav">
<p>Home</p>
<p>Menu</p>
<p>Location</p>
<p>Restaurant Infomation</p>
<p>Restaurant Review</p>
<p>Special Events</p>
<p>DVD</p>
<p>
<a href="wine-list.html">
<img src="../images/wine_header.jpg" alt="Wine Ad" width="150" height="100" border="0" /></a>
</p>
</div>
<p>Greeting: "Hello, World!"</p>
<h1>Knowing your wines</h1>
<dl>
<dt>Acid, acidity</dt>
<dd>The tart (or in excess, sour) quality that wine's natural acidity imparts and that gives the wine a sense of body and structure. Required for proper balance; too much or too little constitutes a flaw.</dd>
<dt>Almond</dt>
<dd>A light bitter, nutlike quality sometimes noted in Italian white wines.</dd>
<dt>Anise</dt>
<dd>Faint licorice, a pleasant element in some Spanish reds; may indicate, however, that the wine has been artificially acidified, a practice that may improve short-term enjoyment but tends to make wines that cellar poorly.</dd>
<dt>Attack</dt>
<dd>A technical term for the first impression the wine makes as it reaches your palate, distinguished (in time sequence) from "middle" or ""mid-palate"" and "finish" or "aftertaste."</dd>
<dt>Bouquet, bottle bouquet</dt>
<dd>As a technical term, the smells that develop with age in the wine bottle, as opposed to "aroma," the smells associated with the fruit. I have little use for distinctions this narrow and try to avoid using them in my wine notes.</dd>
<dt>Earthy</dt>
</dd>Generic term for a range of aromas and flavors associated with organic qualities like "barnyard," "forest floor," "merde," and "tree bark." May be associated with brettanomyces (see above) but can also result
from oak aging or the nature of specific grapes. Mourvedre, for instance, imparts a characteristic earthy aroma. Again, not necessarily a fault, but "earthy" wines tend to be controversial, and a little bit is usually enough.</dd>
</dl>
</body>
</html>
So for some reason my html is not getting the dt and dd and changing the colors from normal to red. I dont get it, it goes to file (it should) but is doing nothing. have tried checking file names, making sure the paths are correct (they are). They are in the same exact folder.
Take out the weight: bold; This is breaking the CSS below. It should be font-weight:bold.
font-dd {font: Arial, Helvectica, sans-serif;
size: .9em;
font-weight: bold;
color:red;
line-height: 2em; }
It is because you are trying to use a value that is not a valid color (dark red (#6b1101) is not correct. Find the available value types here https://www.w3schools.com/cssref/pr_text_color.asp
New to HTML and CSS and trying to replicate sites to get some practice. I'm having some trouble replicating a section on the airbnb website where it lists the explore, contact and book. For some reason, I float the image to the left and my h3 and p tags should not overlap the image. I've made sure to display the image as a block, but the h3 and p tags overlap and my margins won't work. Not sure what I'm doing wrong.a
Thanks
Here's the css
.feat-box {
background-color: red;
float: left;
margin-top: 20px;
width: 282px;
}
.feat-box h3 {
font-size: 22px;
font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(57, 60, 61);
margin-left: 10px;
padding-top: 10px;
}
.feat-box p {
font-size: 17px;
font-family: Shift, 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: rgb(57, 60, 61);
margin-left: 10px;
}
.feat-box img {
float: left;
display: block;
}
.feat-box-container {
margin: auto;
width: 900px;
}
Here's my html
<div class="feat-box-container">
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
<h3>Explore</h3>
<p>Find the perfect place.</p>
</div>
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/contacts.png"/>
<h3>Contacts</h3>
<p>Message hosts.</p>
</div>
<div class="feat-box">
<img src="http://www.somanyfoods.com/wp-content/uploads/2014/05/check-mark.png"/>
<h3>Book</h3>
<p>View your itinerary.</p>
</div>
</div>
Try adding
display:inline
to your
.feat-box p
you might have to play around a little with the margins to get the text to align, but it fixed it for me.
If your learning CSS I'd advice installing firebug, it's an add-on that will help you better understand how CSS works.