I am trying to get the div with div class bioDiv to line up under the image but have tried so many things that I am just getting more and more confused can anyone look at the code for me and give me a clue? Looking to keep the same look just move the div to a more central location.
here is the code:
body {
width: 100%;
height: auto;
background-image: url("../img/marble-background.gif");
background-size: 100% 100vh;
}
img {
border: 10px solid #E3C640;
}
.menuDiv {
background-color: white;
height: 850px;
width: 300px;
margin-top: 70px;
border: 15px solid #E3C640;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 30px;
}
.bioDiv {
background-color: white;
height: 850px;
width: 1200px;
border: 15px solid #E3C640;
position: relative;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Cary McClures' Portfolio</title>
<style type="text/css">
#import url("bootstrap-5.1.3-dist/css/bootstrap.css");
</style>
</head>
<head>
<body>
<img style="position: absolute; right: 600px; top: 68px
" src="../img/images/me.jpg" width="400" height="600" alt="picture of cary" />
<div class="menuDiv">
<h2 style="color: goldenrod">Home</h2>
<br>
<h2 style="color: goldenrod">Biography</h2>
<br>
<h2 style="color: goldenrod">Education</h2>
<br>
<h2 style="color: goldenrod">Graphic Design</h2>
<br>
<h2 style="color: goldenrod">Freelance</h2>
<br>
<h2 style="color: goldenrod">Baking</h2>
<br>
<h2 style="color: goldenrod">Photo Gallery</h2>
<br>
<h2 style="color: goldenrod">Resume</h2>
<br>
<h2 style="color: goldenrod">Contacts</h2>
<br>
<h2 style="color: goldenrod">Sitemap</h2>
</div>
<div class="bioDiv">
<br>
<h2 style="color: goldenrod">Biography</h2>
<p>Cary L. McClure is an enthusiastic Geneva-based Educator, Culinary Artist, Graphic Designer, and Overachiever with a decade-long background in leadership and customer service.
</p>
<br>
<p>Hailing from Indianapolis originally, Cary’s avid interest in the graphic arts started while he was in high school back in 1983. Unable to attend college, he wound up in the food industry.
</p>
<br>
<p>After working as a Pastry Chef for several years, Cary ultimately has had to alter his career path, due a disability he endured during his time in the military.
</p>
<br>
<p>Currently Cary has been working as a Substitute teacher (K-12) for Adams Central and South Adams Schools.
</p>
<br>
<p>Cary served as an Adjunct Instructor at Ivy Tech Community College, where he taught students about Cakes, Filling and Icings, Wedding Cake Production, and Classical Pastries.
</p>
<br>
<p>In 2019 Cary obtained his bachelor’s degree in Visual Communication (Graphic Design) from Indiana University. Furthermore, he holds an Associates of Applied Science degree (with honors) in Hospitality & Culinary Pastry Arts from Ivy Tech.
</p>
<br>
<p>Outside of his career, Cary L. McClure enjoys reading fantastical books, PS4 and Xbox One gaming, and crafting gum-paste flowers. An avid traveler, he also loves exploring new places and is seeking a position that will allow him to travel across
the country. Above all, he cherishes spending quality time with his family. He is the proud father of one married son.
</p>
<br>
</div>
</body>
</head>
</html>
I would suggest making two containers (an aside and a main) and put the navigation list in the aside and the image and bio in the main. Something like this:
.container {
display: flex;
}
<div class="container">
<aside>
<h1>Put your nav here</h1>
</aside>
<main>
<img src="" height="200" width="300" />
<div>
<h1>Put Bio here</h1>
</div>
</main>
</div>
PS: In case you didn't know, aside and main are semantic HTML5 tags used to markup a page. You can use divs instead of them, but it's not best practice
In Bootstrap you do not have to dictate the widths etc, it can all be done using standard Bootstrap CSS which you dictate as a class= in your HTML. So, for the image you could have that fluid inside a column.
<div class="col-sm-12 col-md-10 mx-auto">
<img src="../img/images/me.jpg" class="img-fluid" alt="picture of cary"/>
</div>
That's full width (12 wide) on small screens and not quite full width (10 wide) on anything larger but mx-auto should center the entire Div. Setting the image to class img-fluid makes it the full width of the Div no matter the screen.
Hopefully after that you can use exactly the same column set up for .bioDiv.
<div class="col-sm-12 col-md-10 mx-auto">
<h2 style="color: goldenrod">Biography</h2>
continued content here....
</div>
Ultimately you are just wrapping the image in a Div and setting both it and bioDiv to the same column parameters. It should not hurt in any way to set up menuDiv a similar way.
Related
I'm trying to make a little indie game site, and I'd like to make the section of each entry that contains the title and tags of the game a lighter green than the portion holding the description and picture.
body {
margin: 0;
padding-top: 150;
padding-bottom: 0;
}
.fixed-header {
width: 100%;
position: fixed;
background: #75b478;
color: black;
text-align: center;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: large;
top: 0;
z-index: 1;
margin: 0;
}
.container {
width: 100%;
background-color: #589c5b;
overflow: auto;
margin: 0;
}
nav a {
color: rgb(255, 255, 255);
text-decoration: none;
padding: 5px 35px 10px;
display: inline-block;
width: 20%;
height: 25px;
line-height: 25px;
margin: 0;
}
a:link, a:visited, a:hover, a:active {
text-decoration: none;
color: rgb(255, 255, 255);
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
.section {
text-align: center;
margin-top: 50px;
font-family: 'Andika', sans-serif;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
.games {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-top: 50px;
margin-bottom: 50px;
}
img {
width: 100%;
height: 250px;
border-radius: 15%;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
<DOCTYPE! html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<html lang="en-US">
<head>
<link rel="stylesheet" href="page.css">
<title>Indie Games List</title>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital#1&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Andika:wght#700&display=swap" rel="stylesheet">
</head>
<body>
<div class="fixed-header">
<h1>Indie Games</h1>
<div class="container">
<nav>
To Play
Reviews
Indie-x
Favorites
</nav>
</div>
</div>
<h1 class="section" id="platformers">Platformers</h1>
<div class="games">
<article>
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
<hr>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
<article>
<h2>Celeste</h2>
<p class="tags">Difficult, Amazing Soundtrack</p>
<hr>
<p>"Help Madeline survive her inner demons on her journey to the top of Celeste Mountain, in this super-tight platformer from the creators of TowerFall. Brave hundreds of hand-crafted challenges, uncover devious secrets, and piece together the mystery of the mountain."</p>
<img src="celeste.png">
</article>
<article>
<h2>Ori and the Blind Forest/Will of the Wisps</h2>
<p class="tags">Amazing Soundtrack, Metroidvania</p>
<hr>
<p>"Ori and the Blind Forest tells the tale of a young orphan destined for heroics, through a visually stunning action-platformer crafted by Moon Studios for PC."</p>
<img src="ori.png">
</article>
</div>
<div class="games">
<article>
<h2>Cuphead</h2>
<p class="tags">Difficult, Hand-Drawn</p>
<hr>
<p>"Cuphead is a classic run and gun action game heavily focused on boss battles. Inspired by cartoons of the 1930s, the visuals and audio are painstakingly created with the same techniques of the era, i.e. traditional hand drawn cel animation, watercolor backgrounds, and original jazz recordings."</p>
<img src="cuphead.png">
</article>
</div>
<hr>
<h1 class="section" id="horror">Horror</h1>
<div class="games">
<article>
<h2>Omori</h2>
<p class="tags">Psychological Horror, RPG, Amazing Soundtrack</p>
<hr>
<p>"Explore a strange world full of colorful friends and foes. When the time comes, the path you’ve chosen will determine your fate... and perhaps the fate of others as well."</p>
<img src="omori.png">
</article>
<article>
<h2>Needy Streamer Overload</h2>
<p class="tags">Psychological Horror, Visual Novel, Streaming</p>
<hr>
<p>"NEEDY STREAMER OVERLOAD is a “multi-ending ADV” depicting daily life with “OMGkawaiiAngel”, a young girl with a rather extreme need for approval attempting to become the #1 “Internet Angel” (streamer)."</p>
<img src="nso.png">
</article>
<article>
<h2>Little Nightmares 1 & 2</h2>
<p class="tags">Psychological Horror, Platformer, Puzzle</p>
<hr>
<p>"Immerse yourself in Little Nightmares, a dark whimsical tale that will confront you with your childhood fears! Help Six escape The Maw – a vast, mysterious vessel inhabited by corrupted souls looking for their next meal."</p>
<img src="ln.png">
</article>
</div>
<div class="games">
<article>
<h2>Sally Face</h2>
<p class="tags">Psychological Horror, Hand-Drawn, Mystery</p>
<hr>
<p>"Delve into a dark adventure following the boy with a prosthetic face and a tragic past. Unravel the sinister mysteries of Sally's world to find the truth that lies hidden beneath the shadows."</p>
<img src="sallyface.png">
</article>
<article>
<h2>FAITH: The Unholy Trinity</h2>
<p class="tags">Psychological Horror, Retro, Supernatural</p>
<hr>
<p>"What you are about to do has not been approved by the Vatican. As a young priest, struggle against demons, insane cultists, and your own weakening faith in this pixel horror game inspired by the era of classic 8-bit gaming and the "Satanic Scare" of the 1980s."</p>
<img src="faith.png">
</article>
<article>
<h2>Carrion</h2>
<p class="tags">Psychological Horror, Villain Protagonist, Lovecraftian</p>
<hr>
<p>"CARRION is a reverse horror game in which you assume the role of an amorphous creature of unknown origins, stalking and consuming those that imprisoned you."</p>
<img src="carrion.png">
</article>
</div>
<div class="games">
<article>
<h2>Milk inside a bag of milk inside a bag of milk</h2>
<p class="tags">Psychological Horror, Psychedelic, Visual Novel</p>
<hr>
<p>"A short story about what sort of challenges everyday little things can be. Help the girl buy milk, be the first not to disappoint her."</p>
<img src="milk.png">
</article>
<article>
<h2>Iron Lung</h2>
<p class="tags">Psychological Horror, Underwater, Walking Simulator</p>
<hr>
<p>"A short horror game where you pilot a tiny submarine through an ocean of blood on an alien moon."</p>
<img src="ironlung.png">
</article>
<article>
<h2>Madison</h2>
<p class="tags">Psychological Horror, Supernatural, Exploration</p>
<hr>
<p>"MADiSON is a first person psychological horror game that delivers an immersive and terrifying experience. With the help of an instant camera, connect the human world with the beyond, take pictures and develop them by yourself. Solve puzzles, explore your surroundings and most importantly, survive."</p>
<img src="madison.png">
</article>
</div>
<div class="games">
<article>
<h2>Bendy and the Ink Machine/Dark Revival</h2>
<p class="tags">Survival Horror, Unique Art Style, Adventure</p>
<hr>
<p>"Bendy and the Ink Machine is the first person puzzle action horror game that will forever ruin your childhood love of cartoons."</p>
<img src="bendy.png">
</article>
<article>
<h2>Choo-Choo Charles</h2>
<p class="tags">Survival Horror, Open-World, FPS</p>
<hr>
<p>"Navigate an open-world island in an old train, upgrade it over time, and use it to fight an evil spider train named Charles."</p>
<img src="choo.png">
</article>
<article>
<h2>Don't Starve</h2>
<p class="tags">Survival Horror, Open-World, Unique Art Style</p>
<hr>
<p>"Don't Starve is an uncompromising wilderness survival game full of science and magic. Enter a strange and unexplored world full of strange creatures, dangers, and surprises. Gather resources to craft items and structures that match your survival style."</p>
<img src="ds.png">
</article>
</div>
<div class="games">
<article>
<h2>The Mortuary Assistant</h2>
<p class="tags">Survival Horror, Supernatural, Mystery</p>
<hr>
<p>"Alone with the dead... Embalm corpses, banish demons, save your soul."</p>
<img src="tma.png">
</article>
<article>
<h2>Endoparasitic</h2>
<p class="tags">Survival Horror, Third-Person Shooter, Space</p>
<hr>
<p>"Three limbs ripped off, infected with a deadly parasite, you must save your research. Drag yourself through the corridors of a secret research lab on a remote asteroid, fight off horribly mutated monsters, inject countless syringes of vaccines, and survive at all costs."</p>
<img src="endo.png">
</article>
</div>
</body>
I've tried changing the background color of my h2 and .tags elements, but that just sends a light green line across the entire screen. Ideally, I'd like to keep the shape of my boxes and simply change the color above the < br>. All suggestions appreciated!
Put the h2 and p tag in a div and change the background color of that, rather than the individual tags.
So change this
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p></div>
To this
<div class="upper-section">
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
</div>
Set the upper section CSS to
.upper-section {
background-color: #39cb34;
}
You should get something like this.
.upper-section {
background-color: #39cb34;
}
p {
font-family: 'Lato', sans-serif;
}
h2 {
padding-left: 2px;
padding-right: 2px;
}
.tags {
font-style: italic;
font-family: 'Source Sans Pro', sans-serif;
}
article {
background-color: #67aa69;
text-align: center;
width: 30%;
padding: 2;
position: relative;
border-radius: 10%;
}
<article>
<div class="upper-section">
<h2>Hollow Knight</h2>
<p class="tags">Difficult, Souls-like</p>
<hr>
</div>
<p>"Forge your own path in Hollow Knight! An epic action adventure through a vast ruined kingdom of insects and heroes. Explore twisting caverns, battle tainted creatures and befriend bizarre bugs, all in a classic, hand-drawn 2D style."</p>
<img src="hollow-knight.png">
</article>
i am making a website for school. The images need to float right with some <p> text to left of it but cant make it work. Who can help me, see img for clearence. Here is some code:
.img-inno {
float: right;
height: 10%;
width: 10%;
text-align: left;
}
<header class="inno"> Innovation 1, Running
</header>
<p> One of the best sporting technoligies out is a treadmill to determine which running shoes you need. </p>
<p> You will walk a couple of 100 meters and a screen will show how you place you foot in the shoes you have tested. </p>
<p> Based on that you can choose new choes and will determine again if the shoes fit. </p>
Eventually you will have some good data which shoes will fit the best. The data will be sent via email.
<footer>
<p> These shops are everywhere! In the USA and The Netherlands, you name it! </p>
More info? Click here
</footer>
<a href="https://21run.com/eu/">
<img class="img-inno" id="img1" src="https://hips.hearstapps.com/hmg-prod/images/male-athlete-running-on-tartan-track-royalty-free-image-1624297569.jpg?crop=0.670xw:1.00xh;0.245xw,0&resize=640:*" alt="Running, copyright belongs to runner's world">
</a>
</article>
<article>
<header class="inno"> Innovation 2, Bowling
</header>
<p>This one could be a little bit silly, but it is a good innovation. I am talking about the Computerized Scoring Bowling.</p>
<p> A computer will focus on the score, while you can focus on the bowling aspect and don't have to count your scores. </p>
<p>These small innovations have a impact about our daily life without you aven noticing.</p>
<footer>
Fun Fact: The risk of a false score went down drasticly after this invention.
Make a reservation for bwoling here.
</footer>
<a href="https://www.etsy.com/nl/listing/1052730525/aangepaste-airbrushed-bowling-ball?gpla=1&gao=1&">
<img class="img-inno" src="https://cdn.bleacherreport.net/images_root/slides/photos/000/995/723/83452843_display_image.jpg?1307417974" alt="Bowling, Copyright belongs to bleacherreport.com">
</a>
</article>
As c.m. noted it is better to do it with CSS Flexbox.
Check out the following example to get an idea of how it works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
article {
display: flex;
justify-content: space-between;
/*flex-wrap: wrap;
Use this if you want the images to wrap under the text for smaller screen sizes*/
}
.left {
flex-grow: 3;
flex-shrink: 1;
flex-basis: auto;
}
.right {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.img-inno {
max-width: 200px;
width: 100%;
}
</style>
<title>Document</title>
</head>
<body>
<article>
<div class="left">
<header class="inno">
Innovation 1, Running
</header>
<p> One of the best sporting technoligies out is a treadmill to determine which running shoes you need. </p>
<p> You will walk a couple of 100 meters and a screen will show how you place you foot in the shoes you have tested. </p>
<p> Based on that you can choose new choes and will determine again if the shoes fit. </p>
<p>Eventually you will have some good data which shoes will fit the best. The data will be sent via email.</p>
<footer>
<p> These shops are everywhere! In the USA and The Netherlands, you name it!</p>
<p> More info? Click here</p>
</footer>
</div>
<div class="right">
<a href="https://21run.com/eu/">
<img class="img-inno" id="img1" src="https://hips.hearstapps.com/hmg-prod/images/male-athlete-running-on-tartan-track-royalty-free-image-1624297569.jpg?crop=0.670xw:1.00xh;0.245xw,0&resize=640:*" alt="Running, copyright belongs to runner's world">
</a>
</div>
</article>
<article>
<div class="left">
<header class="inno">
Innovation 2, Bowling
</header>
<p>This one could be a little bit silly, but it is a good innovation. I am talking about the Computerized Scoring Bowling.</p>
<p> A computer will focus on the score, while you can focus on the bowling aspect and don't have to count your scores. </p>
<p>These small innovations have a impact about our daily life without you aven noticing.</p>
<footer>
Fun Fact: The risk of a false score went down drasticly after this invention.
Make a reservation for bwoling here.
</footer>
</div>
<div class="right">
<a href="https://www.etsy.com/nl/listing/1052730525/aangepaste-airbrushed-bowling-ball?gpla=1&gao=1&">
<img class="img-inno" src="https://cdn.bleacherreport.net/images_root/slides/photos/000/995/723/83452843_display_image.jpg?1307417974" alt="Bowling, Copyright belongs to bleacherreport.com">
</a>
</div>
</article>
</body>
</html>
Use CSS Flexbox
That is the html code
<article>
<p>Text</p>
<img src=""/>
</article>
and that css
article {
width: 500px;
display: flex;
}
then you can put spacing with margin and padding on your p or img and you can align your content, too
don't use float anymore, that's not modern coding style
read more about flexbox, there is a nice guide at css-tricks.com
I'm brand new to web development and I have build a little website with 3 pages. My goal is to use #media tags to make it responsive for the following: max-widths: 980px, 768px and 640px. I did the first page and it's been acting weird. How can I make the entire website responsive? Please to assist. My code for all 3 pages and the media is attached. Thanks.
/*first page */
<head>
<title>AboutMe</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact">Contact</li>
<li class="portfolio">Portfolio</li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
To briefly introduce the... to you I would say it is a country located on the........>
shares the same borders with ....... It is the world largest<br>
producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*second page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
</div>
</div>
<div class="middle">
<div class="center-portfolio">
<h3> Portfolio</h3>
<hr>
<div class="div1"><img src="assets/img/career1.jpg" height="120px" width="150px"></div>
<div class="div2"><img src="assets/img/chocolatour.jpg" height="120px" width="150px"></div>
<div class="div3"><img src="assets/img/guildhouse.jpg" height="120px" width="150px"></div>
<div class="div4"><img src="assets/img/career2.jpg" height="120px" width="150px"></div>
<div class="rotateIn div5"><img src="assets/img/Abidjan1.jpg" height="120px" width="150px"></div>
<div class="div6"><p><i>please to hover on the images</i></p></div>
<div class="banner1">career picture 1</div>
<div class="banner2">chocolate tour</div>
<div class="zoomIn banner5">Abidjan</div>
<div class="banner4">career picture 2</div>
<div class="banner3">Guild Brussels</div>
</div>
</div>
<div class="footer">
<p class="footer-copyright"> Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
</body>
/*third page */
<body>
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About Me</li>
</ul>
</div>
</div>
<div class="middle">
<div class="center">
<h3> Contact</h3>
<hr>
<form>
Name:<br>
<input id="namebox" type="text" name="name" required="" placeholder="your name">
<br><br>
Email:<br>
<input id="emailbox" type="Email" name="email" required="" placeholder="example#yahoo.com">
<br><br>
Message:<br>
<textarea id="messagebox" style="height: 200px; " name="message" placeholder="Enter massage here" required="">
</textarea>
<br><br>
<input type="submit" value="submit" name="submit">
</form>
<br>
</div>
</div>
<div class="footer">
<p class="footer-copyright">
Copyrigtht © 2019 Portfolio "name" All rights reserved.
</p>
</div>
</div>
</body>
/* Width at 768px and below */
#media screen and (max-width: 768px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
/*Width at 640px and below */
#media screen and (max-width: 640px) {
body {
background-color : #E9967A;
}
.container {
background-color: green;
border-style: none;
width: 50%;
}
.middle-about-me,
.footer, .top{
width: 50%;
}
.middle-about-me{
width: 50%%;
}
}
Start out by removing fixed width properties. I am having a hard time seeing how you need width: 50% on everything. Then start by just addressing the styles of your .container element.
A good techniques is setting the max-width to the width you have in mind for the site to be viewed on a normal desktop screen, in the demo I used 600px but you can use any value that feels right.
Then in you media query assign a new max-width value that is appropriate for the screen size in the query, here i used 80% becuase typically on small screens you want the content to mostly fill the width of the screen with a little space on the sides, but again you can configure this to your needs in a variety of ways.
The main thing here is that your container element is now responsive and the content inside can fill up the space however you like from there. Run the snippet and click the Full page link to play around with the screen width and see the behavior working.
.container {
max-width: 600px;
margin: 0 auto;
}
#media screen and (max-width: 640px;) {
.container {
max-width: 80%;
}
}
<div class="container">
<div class="top">
<div class="myname">
<h4 class="firstlast">name</h4>
</div>
<div class="list">
<ul>
<li class="contact">Contact</li>
<li class="portfolio">Portfolio</li>
<li class="about">About</li>
</ul>
</div>
</div>
<div class="middle-about-me">
<div class="center">
<h3> About Me</h3>
<hr>
<p class="myinfo">Hi my name is ..... and I was born on October 9th, 1971 in ......
<img src="assets/img/author.jpg" width="150px" height="150px"><br>
To briefly introduce the... to you I would say it is a country located on the........>
shares the same borders with ....... It is the world largest<br>
producer of coacoa used for chocalate and lotions. In one word, it's the country where chocolate tastes like<br> real chocolate. Since the last discovery of petrol in the country, it's been a little agitated as France and the<br>US want to control the discovery. After obtaining my masters in Business Management, I worked as the marketing representative for an american company before moving to the US to pursue a degree in Mathematic at UNT Dallas and worked for...,...., and.... as a Math instructor. My goal in this program is to learn to build websites from scratch and later on to build apps from scratch. I've got the right instructional staff and the right TAs to help me reach that goal. All I have to do is to go to work.<br> "Impossible is nothing", Muhammad Ali.</p>
<p class="smile"><i>hover on my picture and start smiling</i></p>
</div>
</div>
<div class="footer">
<p class="footer-copyright">Copyrigtht © 2019 Portfolio "name" All rights reserved.</p>
</div>
</div>
I wish you had a sketch of what the final product will look like it would have been very helpful. There is more to making a page responsive than writing just valid HTML tag and corresponding styles and mind typos because from your code the extra % sign will make
.middle-about-me{
width: 50%%;
}
misbehave.
There a couple of things you need to know to be able to make a page responsiveness effective and very close to what you want.
Firstly you should consider resetting the default styles that the browser naturally applies to valid HTML tags by using normalize.css or utilize the power of universal selector which is almost as good in modern browsers, something like:
*,
*::before,
*::after{
padding: 0;
margin: 0;
box-sizing: inherit; /* to inherit the value declared in the body selector */
}
html{
font-size: 62.5% /* (10/16) * 100% and this is possible because by default the value of 100% will be computed to 16px by the browser and equal to 1(r)em, with this conversion we can reduce the calculations whenever you want to convert a value from px to (r)em since the are in multiples of 10 eg 1(r)em == 10px and 10(r)em == 100px*/
}
body{
box-sizing: border-box;
}
img{
width: 100%;
min-width: 27rem; /* to make the images responsive and look good on smaller screens */
}
so with the that basic reset you can always rely on using ems or rems for fonts an percentages for images and other block element when it feels appropriate.
This little write up is not enough to teach you all you need to know about responsiveness in the web but I hope it shed light on your path. Meanwhile those were not my original ideas i took a course by 'Jonas Schmedtman', He actually thought me those.
If you have a sketch of what the final pages should look like or you are still not very clear with what i have tried to explain so far please don't hesitate to add a comment so that we tidy it up together.
I am trying to make this page responsive. As you can see when I resize the browser the text is scrunched rather than moving to the bottom of the image. Any help would be greatly appreciated!
Here is my HTML:
<div id="content-wrapper">
<div class="container">
<div class="content">
<div class="line">
<h2 class="text-center exec-header">Executive
Directors</h2>
</div>
<article class="ninecol">
<div class="content-item first cf" id="maja">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/majapic.jpg"
width="250px">
</figure>
<h3 class="name">Maja Miletich</h3>
<h5 class="job-title">CEO</h5>
<div class="description">
<p>Maja Miletich is the CEO of Zip Zap Zop Kids,
LLC. Maja has worked with children on many levels.
Having a brother with Autism has given Maja an
understanding of how powerful communication is for
ALL children. Maja has worked for years as a
teacher where she practices emergent
curriculum.</p>
<p>Maja has studied theater and improv at A.C.T. in
San Francisco as well as graduated from The Second
City Training Center in Hollywood where she studied
improv and sketch comedy.</p>
<p>Maja has her Bachelors Degree in Early Childhood
Education. Maja's focus is on inclusive classrooms
where curriculum is designed to allow children and
young adults to feel comfortable expressing
themselves in whichever way they feel most
comfortable</p>
<p>Maja believes when we can share with one another
what has been taught then, and only then, are we
actually learning.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="april">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/april2.jpg"
width="250px">
</figure>
<h3 class="name">April Miletich</h3>
<h5 class="job-title">CFO</h5>
<div class="description">
<p>April Rasmussen, PhD has been a credentialed
English teacher since 2008 and has taught
everything from advanced placement English language
and composition to literature through film, and
English as a second language support classes. Her
passion is for the art of story and also
storytelling as a tool for student growth. She
holds advanced degrees in education, mythology and
depth-psychology.</p>
</div>
</div>
</article>
</div>
<div class="line">
<h3 class="text-center exec-header">Board of Directors</h3>
</div>
<div class="content-item first cf" id="ari">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/ari.jpg" width=
"250px">
</figure>
<h3 class="name">Ari Schenider</h3>
<h5 class="job-title">President</h5>
<div class="description">
<p>Ari Schneider is a graduate of The Second City
Conservatory and has a (BA) Hons from The Guildford School
of Acting in England. He has been a cast member of the
all-ages improv review The Really Awesome Improv Show
(Voted Best Kid’s Comedy Show) at The Second City in
Hollywood for the past 3 years. He also is affiliated with
the mentorship program, YSF (The Young Screenwriters
Foundation) at New Rhodes as well as teaching afer-school
improv with Zip Zap Zop Kids, LLC.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="debra">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/debra.jpg" width=
"250px">
</figure>
<h3 class="name">Debra Gliozzi</h3>
<h5 class="job-title">Treasurer</h5>
<div class="description">
<p>Debra Kratochvil Gliozzi is a first generation American
and first in her family to attend college. Her career spans
35 years and two distinct industries. Debra is currently an
administrator and educator in Danville, California. She
brought her MBA and business experience to San Ramon Valley
High School and integrated Business Computers (an ROP
course), Personal Finance and Introduction to Business and
Entrepreneurship into the curriculum. Debra says that her
goal is to equip students with skills that prepare them for
the real world. It is the most important thing I can
do.</p>
<p>This is her second career after transitioning from the
Telecommunications Industry where she held management
positions at Calix Inc., SBC Communications, Pacific Bell,
MCI and Sprint. Her vast experiences included Forecasting,
Accounting, Business Analysis, Market Financials,
Competitive Assessment, Product Development, Product
Marketing, Procurement, Quality Management and Sales
Operations & Planning.</p>
</div>
</div>
<hr>
<div class="content-item first cf" id="debra">
<figure>
<img alt="" class="bio-pics" src=
"/wp-content/themes/creativeforces/images/melina.jpg"
width="250px">
</figure>
<h3 class="name">Melina Johnson</h3>
<h5 class="job-title">Secretary</h5>
<div class="description">
<p>Melina Johnson is a self-employed entrepreneur who
created her own home organizing business. Melina is the
mother of two children, her son having Autism. She has
spent countless hours dedicated to researching and
providing her son with the best therapies and services to
help him with his growth and development. Every therapist
and teacher, over the years, has told Melina that her
natural sense of humor has been the best therapy she could
provide to her son - Humor and laughter open up doors to
cognitive and social development. And it’s fun!</p>
<p>Melina’s education has been in the health sciences,
having a degree in Dental Hygiene. After years of hygiene
practice, she decided to create a job for herself that
would utilize her natural organizational skills, and allow
her creativity and fun. Melina continues to grow her home
organizing business and raise her children with a strong
sense of responsibility, and a positive outlook on
life.</p>
</div>
</div>
</div>
</div>
and CSS:
.line {
overflow: hidden;
text-align: center;
}
.exec-header{
margin-top: 15px;
display: inline-block;
padding: 0 15px;
position: relative;
font-family: Roboto Condensed;
font-weight: bold;
font-size: 30px;
}
.content .ninecol {
padding-right: 4.6875%;
padding-left: 4.6875%;
}
.exec-header:before{
right: 100%;
}
.exec-header:before, .exec-header:after {
background: #333333;
content: "";
display: block;
height: 3px;
position: absolute;
top: 50%;
width: 96%;
}
.content {
overflow: hidden;
margin: 0 auto;
max-width: 1200px;
}
.content-item.first {
padding-top: 0;
background: 0;
overflow:hidden;
}
.content-item {
margin-left: -2.18978%;
margin-right: -2.18978%;
padding: 30px 2.18978%;
}
#maja{
margin-top: 10px;
}
#ari{
margin-top: 10px;
}
.exec-header:after {
left: 100%;
}
.cf:before, .cf:after {
content: " ";
display: table;
}
.content-item figure {
}
figure img {
padding-bottom: 14px;
}
.bio-pics {
display: block;
max-width: 100%;
height: auto;
-ms-interpolation-mode: bicubic;
-moz-user-drag: -moz-none;
-webkit-user-drag: none;
user-drag: none;
}
h3.name {
margin-bottom: .75em;
line-height: 1.2em;
font-family: Roboto Condensed;
font-weight: bold;
}
.content-item figure {
float: left;
margin-right: 5.83942%;
margin-bottom: 0;
}
.content-item .description, .content-item .details {
overflow: hidden;
}
.content-item .description {
min-height: 0;
}
h5.job-title{
font-family: Roboto Condensed;
font-weight: bold;
margin-top: -16px;
}
try by adding float:left ; in description class in css file
it should work also add an display inline-block to div with id=maja
I am having a bit of a problem with one of my containers. It is not expanding with my content. Here is the code:
<!--center section start-->
<div id="centerContent">
<!--center left begin-->
<div id="centerLeft">
<h2>
Special Disney Ticket Offer!
</h2>
<p class="specCont">
<img class="specImg" src="images/universal-main-offer.jpg" alt="Special Universal Studios Ticket Offer!" />
Super Value Disney 3 Day Touch of Magic Ticket! Just $219 for each ticket! Get 3 Days to visit the Disney Theme Parks (Magic Kingdom, Epcot, Hollywood Studios, Animal Kingdom) PLUS a 4th day at Disney Quest, Blizzard Beach or Typhoon Lagoon! For an unbelievable value! Call & ask for the Resort offer<br />(restrictions apply).<br /> <strong>Call us: 1-800-544-7646</strong>
</p>
</div>
<!--center left end-->
<!--center right begin-->
<div id="centerRight">
<a href="http://tix.greatorlandodiscounts.com/index.php?catid=106">
<img class="rightFrontImg" src="images/legoland-fl-front-ad.jpg" alt="Legoland Florida Discount Tickets" />
</a>
</div>
<div class="clear"></div>
<!--center right end-->
</div>
<!--center section end-->
CSS:
#centerContent {
width: 980px;
height: 100%;
background-image:url(../images/main-special-bg-strip.png);
background-repeat:repeat-y;
}
#centerLeft {
width: 572px;
height: 100%;
float:left;
}
#centerRight {
width: 408px;
height: 100%;
float:right;
}
What I am looking to do is have the centerContent div stretch with the two divs inside. I have a background strip on the centerContent that will allow the white background to expand 100%.
I hope that made some sort of sense and thank you in advance for any and all help.
Add overflow:auto; to #centerContent.
Since the child divs are floated, the parent collapses and acts like it has no content. Adding overflow:auto; restores the expected behavior.