When my site is full screen, the four pictures show up in a horizontal line. However, when the window gets smaller, the last picture folds over into the next line. I want all the pictures to stay in a horizontal line no matter what the window size. Any suggestions?
My code:
body {
font-size: 1.5rem;
margin: 0;
display: inline-block;
list-style-type: none;
position: relative;
width: 100%;
background-color: #d5e0e8;
}
img {
padding: 2px;
}
h1 {
text-align:center;
padding: 20px;
font-family: 'Oswald', sans-serif;
}
h2 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
h3{
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
h4 {
text-align: center;
font-size: 40px;
font-family: 'Oswald', sans-serif;
background-color: #a2b5c1;
}
ul {
font-family: 'Open Sans Condensed', sans-serif;
font-size: 25px;
background-color: #6e95ad;
margin: 25px;
}
p {
text-align: center;
font-size: 25px;
font-family: 'Open Sans Condensed', sans-serif;
background-color: #6e95ad;
margin: 25px;
}
p1 {
margin: 525;
font-family: 'Open Sans Condensed', sans-serif;
}
<html>
<img src="making%20a%20scene.jpg">
<img src="sbsn.jpg">
<img src="mvp.jpg">
<img src="kevin.jpg">
<head>
<link rel="stylesheet" href="styles.css" >
<link href="https://fonts.googleapis.com/css?family=Oswald:700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<title> My Job </title>
</head>
<body>
<div style="visibility: hidden; height: 0; width: 0">
</div>
<div>
<h1> ... ENTERTAINMENT </h1>
<h2 class="display-3"> Who We Are </h2>
<p class="lead"> ...is a television production and development company located in S..., California. We create content for television and digital sites such as The History Channel, TLC, Netflix, Discovery, YouTube Red, and many more.
INE was founded by ... and .... These exectives are responsible for creating shows such as The Office (US), The Biggest Loser, Masterchef, Real Housewives of Orange County, Tabatha‘s Salon Takeover, and several others. </p>
<p1> ...Entertainment Sizzle Reel </p1>
</div>
<div>
<h3> My Role </h3>
<p> In the summer of 2017, I was hired as a Development Research Associate after working for three months as an intern for .... My role as a research associate varies each work day. My duties include finding and contacting potential talent for digital and reality series, writing and organizing television pitches for networks, deck design, cold-calling experts, and exectuive assitance to ... and .... </p>
</div>
<!-- They are very scary. -->
<span>
<h4> Employment Hightlights </h4>
<ul>
<li> Transcripting broadcast scripts for <i> Making a Scene with James Franco </i></li>
<li> $ $ $ </li>
<li> Acting as Production Assistant for <i> MVP </i> starring Rob Gronkowski, Andre Ward, Terell Owens, and Julius Randall at CBS Studios</li>
<li><s> Free Lunch </s></li>
<li> My roommate was named Morgan Freeman. </li>
</ul>
</span>
</body>
</html>
I guess you are searching the CSS white-space: nowrap. The effect is that a line will never break.
HTML
<div class="nowrap">
<img src="making%20a%20scene.jpg">
<img src="sbsn.jpg">
<img src="mvp.jpg">
<img src="kevin.jpg">
</div>
CSS
.nowrap {
white-space: nowrap;
}
Demo:
https://jsfiddle.net/2yxcz34d/1/
You could further control the behaviour of the .nowrap container with the CSS overflow: hidden; or overflow: visible;.
So I have this working for you, but first note is you need to remove the HTML tag to the very top. It should come before the body. For this question I moved it to the top and put everything else below inside of a tag. Use for a headline that should appear in the body.
Working Example: https://codepen.io/anon/pen/LzZpbe
In the HTML I wrapped the images in a div and gave it the class "gallery-container" and wrapped each image in a div and gave it a calss "gal-image".
HTML
<div class="gallery-container">
<div class="gal-image">
<img src="https://i.sdlcdn.com/img/product/descimg/SDL008306056_2.jpg">
</div>
<div class="gal-image">
<img src="https://images-na.ssl-images-amazon.com/images/I/71GTFDd4KiL._SX355_.jpg">
</div>
<div class="gal-image">
<img src="http://ssl-product-images.www8-hp.com/digmedialib/prodimg/lowres/c03815648.png">
</div>
<div class="gal-image">
<img src="https://assets.logitech.com/assets/65057/k840-mechanical-pdp.png">
</div>
</div><!-- END GALLERY CONTAINER -->
For the CSS I gave the .gallery-container a width of 100% and the .gal-image a width of 25%. This ensures the images will always be 25% of the total .gallery-container width(100%) so all 4 images will always be side-by-side. I gave your images a padding-right of 2px to separate them by 2px but gave the last image a padding-right of 0 so it does not push the container our 2px and cause a horizontal scrollbar.
CSS
img{
padding-right:2px;
max-width:100%;
}
img:last-of-type{
padding-right:0px;
}
.gallery-container{
width:100%;
}
.gal-image{
width:25%;
float:left;
}
Related
Using a header tag with an h1, the h1 is showing with all the font modifications. The background image will not show. I have verified the image location is valid by using the same code for an img tag. The header will also not push down the lower elements when the screen reduced. Below is the html and css:
<!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">
<title>Dasmoto's Arts & Crafts</title>
<link rel="stylesheet" href="./resources/css/index.css">
</head>
<body>
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<section id="brushes">
<h2>Brushes</h2>
<img src="./resources/images/hacksaw.webp" alt="">
<h3>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.</p>
<p class="links">Starting at $3.00 / brush.</p>
</section>
<section id="frames">
<h2>Frames</h2>
<img src="./resources/images/frames.webp" alt="">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.</p>
<span class="links">Starting at $2.00 / frame.</span>
</section>
<section id="paint">
<h2>Paint</h2>
<img src="./resources/images/finnish.jpeg" alt="">
<h3>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.</p>
<span class="links">Starting at $5.00 / tube.</span>
</section>
</body>
</html>
header {
position: relative;
width: 100%;
height: 130px;
background-image: url('./resources/images/pattern.jpeg');
background-size: cover;
background-position: center;
}
header h1 {
position: absolute;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
}
section img {
display: block;
height: 150px;
width: 150px;
}
section p {
display: inline;
font-family: Arial, Helvetica, sans-serif;
}
#brushes h2 {
background-color: mediumspringgreen;
}
#frames h2 {
background-color: lightcoral;
}
#paint h2 {
background-color: skyblue;
}
.links {
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: blue;
}
Missing Background Image
The problem here is the relative path ./resources/images/pattern.jpeg, relative means, relative to the file where you call it.
In your case, the css is in your CSS file, so the relative path to your image will end up like ./resources/css/resources/images/pattern.jpeg
The dot slash ./ means "Look for the file in current directory" where your current directory for the css file is the css folder.
So either use the correct relative path like ../images/pattern.jpeg or an absolute path like https://www.your-domain.com/resources/images/pattern.png
Header not pushing down content
Two problems here
First, you set a fixed height for the header element
Second, your h1 has position: absolute and therefore doesn't give and "height" on it's own to the header element.
Removing both should give the expected result.
See below example, also note that I've change the background pattern so you see it's working just fine when setting a correct file path.
header {
position: relative;
width: 100%;
background-image: url('https://img.freepik.com/vektoren-kostenlos/zufaelliges-quadratisches-halbtonmuster_1409-1062.jpg?w=2000');
background-size: cover;
background-position: center;
}
header h1 {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 100px;
font-weight: bold;
color: khaki;
text-align: center;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 32px;
font-weight: bold;
color: white;
}
section img {
display: block;
height: 150px;
width: 150px;
}
section p {
display: inline;
font-family: Arial, Helvetica, sans-serif;
}
#brushes h2 {
background-color: mediumspringgreen;
}
#frames h2 {
background-color: lightcoral;
}
#paint h2 {
background-color: skyblue;
}
.links {
display: inline;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: blue;
}
<header>
<h1>Dasmoto's Arts & Crafts</h1>
</header>
<section id="brushes">
<h2>Brushes</h2>
<img src="./resources/images/hacksaw.webp" alt="">
<h3>Hacksaw Brushes</h3>
<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.</p>
<p class="links">Starting at $3.00 / brush.</p>
</section>
<section id="frames">
<h2>Frames</h2>
<img src="./resources/images/frames.webp" alt="">
<h3>Art Frames (assorted)</h3>
<p>Assorted frames made of different material, including MDF, birchwood, and PDE. Select frames can be sanded and painted according to your needs.</p>
<span class="links">Starting at $2.00 / frame.</span>
</section>
<section id="paint">
<h2>Paint</h2>
<img src="./resources/images/finnish.jpeg" alt="">
<h3>Clean Finnish Paint</h3>
<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8 oz.). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.</p>
<span class="links">Starting at $5.00 / tube.</span>
</section>
Your index.html is probably in the root of your project, whereas your CSS stylesheet is in /resources/css/index.css.
You are using relative paths to include the images.
A relative file path points to a file relative to the current page.
Because your index.html and index.css are not in the same directory, they have different relative paths. That's why the image can be loaded from your HTML file, but not from your stylesheet.
You can now rather use everywhere the same absolute path, or you adjust the relative path in your CSS stylesheet.
This should be the correct relative path from your CSS file to your pattern.jpeg.
background-image: url('../images/pattern.jpeg');
This question already has answers here:
What do commas and spaces in multiple classes mean in CSS?
(9 answers)
Closed 7 months ago.
I was styling my website and I choose Catamaran and Lato for headings and body respectively. However, the headers seem to inherit styles from the body which makes the font and the font size the same thing for my headings and paragraph. I was thinking that this is a problem of specificity but I cannot figure out what went wrong.
#import url("colors.css");
/*Global Styles
------------------------------------------------*/
html, body {
margin: 0;
padding: 0;
font-family: 'Catamaran', Sans-Serif;
font-size: 16px;
}
p{
color: var(--dark_text);
}
img{
margin: 0;
padding: 0;
}
h1 h2 h3 {
font-family: 'Catamaran', Sans-Serif;
font-size: 66px;
margin: 0;
padding: 0;
color: var(--dark_red);
}
.content_wrap {
width: 800px;
margin: 0 auto;
padding: 60PX 0;
}
/*Navigation Bar
------------------------------------------------*/
#nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
#nav li {
float: left;
}
#nav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/*Projects
------------------------------------------------*/
/*Profile
------------------------------------------------*/
#profile{
background: var(--dark_red);
color: var(--white_text);
text-align: center;
}
#profile p{
color: var(--white_text);
}
#profile .button{
text-decoration:none;
color: var(--dark_text);
background: var(--light_green);
padding: 6px;
border: 2px var(--light_green);
border-radius: 6px;
display: inline-block;
}
#profile .button:hover{
text-decoration:none;
background: rgb(241, 227, 228,80);
}
/*Projects
------------------------------------------------*/
#projects{
background-color: var(--light_green);
}
#projects .button{
text-decoration:none;
color: var(--white_text);
background: var(--dark_red);
padding: 6px;
border: 2px var(--dark_red);
border-radius: 6px;
display: inline-block;
}
#projects .button:hover{
text-decoration:none;
background: rgb(96, 123, 125, 80);
}
/*Work Experience
------------------------------------------------*/
#work_experiences{
background-color: var(--light_red);
}
#work_experiences p{
margin: auto;
}
/*Drawings and Paintigs
------------------------------------------------*/
#drawings_paintings{
margin: 0;
padding: 0;
}
/*Footer
------------------------------------------------*/
footer{
margin: 0;
padding: 0;
background-color: var(--dark_green) ;
color: var(--white_text);
}
footer a{
color:seashell;
text-decoration: none;
}
<!DOCTYPE html>
<HTML lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<meta name="description"
content="Clycine Yuanqing Hao's personal website and some
funny stuffs : )">
<link href="https://fonts.googleapis.com/css?family=Catamaran|Lato:400i"
rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Clycine's personal website</title>
<script src="main.js"></script>
</head>
<BODY>
<H1 aria-label="Hello World"> <!--to add CSS code to make this displayed in random positions inside of a rectagle-->
<div class="grid" aria-hidden="true">
<span>H</span>
<span>E</span>
<span>L</span>
<span>L</span>
<span>O</span>
<span>W</span>
<span>O</span>
<span>R</span>
<span>L</span>
<span>D</span>
</div> </H1>
<!--***************** TABLE OF CONTENTS *****************-->
<section id="nav">
<nav role="navigation">
<ul>
<li> About Me</li>
<li> Computer Science related</li>
<li> Drawings and Paintings</li>
<li> Funny Stuffs</li>
</ul>
</nav>
</section>
<!--***************** PROFILE ******************-->
<section id="profile">
<div class="content_wrap">
<h1>Clycine Yuanqing Hao </h1>
<picture>
<source media="(min-width:600px)"
srcset="pictures/cly/behindLilas815x929.JPG">
<source srcset="pictures/cly/behindLilas546x602.JPG">
<img src="pictures/cly/behindLilas815x929.JPG"
alt="Clycine next to a lilas tree"
width="163" height="186">
</picture>
<h2>CS student + Digital & Conventional Artist</h2>
<p>As a Computer Science student, I look forward to explore the world of innovation and
technology. I am interested in understanding how my knowledge and skills can apply
to real-life tech projects. </p>
<p>As an artist, I am passinoante to discover beauty and to express them in my own way,
with a cup of tea in my hand, of course.</p>
<a class="button" href="file/Yuanqing(Clycine)_Hao_Resume.pdf">Click here to see PDF of my resume</a>
</div>
</section>
<!--***************** PROJECT ******************-->
<section id="projects">
<div class="content_wrap">
<h3 class="title">Projects & Researches</h3>
<p>Biology research project (written report) - <i>L’hydroponie : une alternative à l’agriculture conventionnelle ?</i></p>
<p>Language: French</p>
<blockquote>"The main objectives of this research were to understand how different hydroponic systems
function and what equipment they require, to acknowledge this technique's limits and
advantages, to explore the role played by nutrients in plants' growth, and ultimately, to
determine if hydroponics can be an alternative to conventional agriculture."
(Boutiba & Hao, 2019)</blockquote>
<a class="button" href="file/rapport_final_biologie.pdf">PDF of the research</a>
</div>
</section>
<!--***************** WORK EXPERIENCES ******************-->
<section id="work_experiences">
<div class="content_wrap">
<h3 class="title">Work Experiences</h3>
<p>Private French Tutor</p>
<p>01/2022 to 12/2022</p>
<p>Individuals – Montréal, Québec</p>
<ul>
<li>Offered tutoring for intermediate French learners.</li>
<li>Helped students learn more about Québec culture through practical conversations.</li>
<li>Integrated French lessons into real-life scenarios and role-playing.</li>
</ul>
<p>Project Intern</p>
<p>06/05/2022</p>
<p>Soteria120 – Calgary, Alberta</p>
<ul>
<li>Obtained real-work experience by participating in
a user experience testing for website in Soteria120</li>
<li>Collaborated with a team of 3 students and program manager
that included data entry (input validations), design validations,
user-experience testing, and quality assurance report writing.</li>
</ul>
</div>
</section>
<footer>
<div class="content_wrap">
Back to the table of contents
McGill University
<p><pre>Phone number: (819)815-3589 Email: clycinehao#gmail.com </pre> </p>
</div>
</footer>
</BODY>
</HTML>
Thank you so much !
The following applies the contained CSS rules to the entire HTML Document (via the html tag):
html, body {
...
}
Where you attempted to apply styling rules to <h1>, <h2>, and <h3> elements, you instead applied the rules to all <h3> that are descendants of <h2> elements that are, in turn, descendants of <h1> elements.
h1 h2 h3 {
...
}
Instead, separate each tag with a comma (,) to apply the rules as desired, as shown below:
h1, h2, h3 {
...
}
Use
h1, h2, h3 {
font-family: 'Catamaran', Sans-Serif;
font-size: 66px;
margin: 0;
padding: 0;
color: var(--dark_red);
}
instead of
h1 h2 h3{
...
}
(Separate the heading (<h1>, <h2>, <h3>) tags using commas (,).)
Whatever you apply to the parent is also applied to the child, unless you specifically change that attribute for the child
HTML Tree Generator of extension chrome is good tools for tree structure grasp
How do I create the horizontal collage and with the same space in between pictures (shown in the picture below) using html5 and css3?
I am very new into both StackOverflow, HTML5 and CSS3 so I do apologize if this post is a bit messy. And I hope you can help my anyway.
This is how i want the final design to look.
Here is my code so far:
h1 {
font-family: 'Brother 1816 Bold', Arial, Helvetica, sans-serif;;
font-size: 2rem;
font-weight: bold;
color: #a71b1a;
}
h2 {
font-family: 'Brother 1816 Bold Italic', Arial, Helvetica,
sans-serif;;
font-size: 1.5rem;
font-weight: bold;
color: #000;
}
.collage_index_1 {
align-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.typekit.net/tck7grc.css">
<title>Freya Photos - Index</title>
</head>
<body>
<main>
<header>
<!-- all the code related to the header here -->
</header>
<h1> <center>WELCOME TO FREYAS PHOTOS!</center></h1>
<h2> <center>We are where you are, helping you capture the moments of life.</center></h2>
<!-- I cannot align these three images here: -->
<div class="collage_index_group">
<div class="collage_index_1">
<img src="img/optimized images/adorable-20374_1920_250x250.png" alt="Image in black and white of a very young child laying on his stomach underneath a white towel.">
</div>
<div class="collage_index_2">
<img src="img/optimized images/bride-1867228_1920._250x250png.png" alt="A summer picture of a woman and a man standing amongst very high reed and kissing eachother passionately">
</div>
<div class="collage_index_3">
<img src="img/optimized images/smile-2072908_1920_250x250.png" alt="A portrait of a young woman holding an apple in her right hand, close to the face while looking straight into the camera, with a little smile">
</div>
</div>
<footer>
<!-- all the code related to the footer here -->
</footer>
</main>
</body>
</html>`
You probably want to have a look at display: flex link
Here is an example.
/* the flex container */
.collage_index_group {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
/* the flex items */
.collage_index {
width: 50px;
height: 30px;
background-color: #f1f1f1;
margin: 10px;
padding: auto;
font-size: 30px;
}
<h1> <center>WELCOME TO FREYAS PHOTOS!</center></h1>
<h2> <center>We are where you are, helping you capture the moments of life.</center></h2>
<div class="collage_index_group">
<div class="collage_index">
<img src="img/optimized images/adorable-20374_1920_250x250.png">
</div>
<div class="collage_index">
<img src="img/optimized images/bride-1867228_1920._250x250png.png">
</div>
<div class="collage_index">
<img src="img/optimized images/smile-2072908_1920_250x250.png">
</div>
</div>
Thanks for sharing the code, please do not forget to share the css. If you could make a snipplet with it it would be perfect ;)
I will now try to adjust my snipplet accordingly.
Edit
I mistakenly wrote something about h1-h6, but found out I was wrong after double checking.
Im not sure that what you mean
/* HORIZONTAL SCROLL */
.scroll-container{
overflow: auto;
white-space: nowrap;
padding: 5px 70px 5px 20px;
background: transparent;
height: 100%;
border-radius:15px;
}
.scroll{
display:inline-block;
}
.scroll img {
margin-right:22px;
width:250px;
height:100px;
width:33%;
}
<div style="text-align:center; font-style:italic;">Scroll to left</div>
<div class="scroll-container">
<div class="scroll">
<!-- PLACE YOUR IMG URL HERE -->
<img src="https://media.istockphoto.com/photos/programmer-working-with-program-code-picture-id1075599562?k=20&m=1075599562&s=612x612&w=0&h=cDFY2kKyhFzSNNlDQsaxoekIW0v7iyaMBkxp11Fz33U="/>
<img src="https://www.careergirls.org/wp-content/uploads/2015/06/Computer_Programmer1920X10180.jpg"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
</div>
</div>
I am making some product cards with an "Add to cart" button. Everything else is aligned centred in the card, but the button is somehow to the far right even tho the code says otherwise. What I mean by this is the button is inside the card's div, so I don't know how if there is something wrong in my code or I'm missing a key style element. I should note my college project is purely website redesign, not development/implementation hence the webpage looks incomplete. I'm trying to get this little blunder outta the way before I add more product cards, filling the page. Also bear in mind I am still new to coding but I'm always learning and improving.
#font-face {
Src: url(customfont/Futuristic.ttf);
Font-family: Future;
}
#font-face {
Src: url(customfont/RobotInvaders.ttf);
Font-family: Robo;
}
h1 {
Font-family: Future;
Color: red;
Text-align: center;
}
h2 {
color: blue;
text-align: left;
Font-family: Robo;
}
.servicesnav nav {
Width: 100%;
Height: 70px;
Overflow: hidden;
Background: none;
}
.servicesnav li {
Display: inline;
Padding-right: 40px;
}
.servicesnav ul {
List-style-type: none;
}
.servicesnav li a:hover {
Background: blue;
}
.card {
max-width: 200px;
Height: 100%;
margin: auto;
text-align: center;
font-family: arial;
}
.card h3 {
Color: red;
}
.price {
color: white;
font-size: 22px;
}
.description {
Color: white;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
Text-align: center;
cursor: pointer;
width: 150px;
font-size: 18px;
}
.card button:hover {
Color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Geek Yourself Out" />
<title>Geek Yourself Out</title>
<link rel="stylesheet" type="text/css" href="GeekYourselfOut.css" />
<link rel="stylesheet" type="text/css" href="Services.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="logo">
<img src="logo.jpg" width="95"/>
</div>
<div class="coolname">
<img src="coolname.jpg" width="105"/>
</div>
<nav>
<ul>
<li class="current-page">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Consultation & Quotes</li>
<li>Contact Us</li>
<li>Client Referrals</li>
<li>Blog</li>
</ul>
</nav>
<h1>Choose one of these categories to start browsing! </h1>
<div class="servicesnav">
<nav>
<ul>
<li>Physical Products</li>
<li>Marketing Materials</li>
<li>Apparel</li>
<li>Photos</li>
</ul>
</nav>
</div>
<h2>Physical Products</h2>
<div class="card">
<img src="ProductService/custom.png" alt="Custom" style="width:100%">
<h3>Custom Product</h3>
<p class="price">$5-$100</p>
<p class="description">Upload your 3D design file(s) and get it printed into a product! No design is too big or small! *Please only upload completed and full-colour 3D design files. We will reject orders of 2D files, unfinished design, or black-and-white.* </p>
<p><button>Add to Cart</button></p>
</div>
<footer>
<div class="bottom-content">
<h3>Geek Yourself Out</h3>
<p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
<div class="socials">
<li><img src="facebook-box-fill.png" alt="Facebook"</li>
<li><img src="instagram-fill.png" alt="Instagram"</li>
</div>
</div>
<div class="bottom-page">
<p>copyright ©2022 Geek Yourself Out. Designed by Kimmy Vo</p>
</div>
</footer>
</body>
</html>
Maybe its issue with any other parent div because when I tried your HTML and CSS on codepen add to cart button is centered.
You can see the codepen I used:- https://codepen.io/GauravSingh96/pen/JjMEeoQ
This is the html used:-
<div class="card">
<img src="ProductService/custom.png" alt="Custom" style="width:100%">
<h3>Custom Product</h3>
<p class="price">$5-$100</p>
<p class="description">Upload your 3D design file(s) and get it printed into a product! No design is too big or small! *Please only upload completed and full-colour 3D design files. We will reject orders of 2D files, unfinished design, or black-and-white.* </p>
<p><button>Add to Cart</button></p>
You will have to recheck all the codes from top.
Hey there i try your code but it shows add to cart button in the center. But still if you face issue try to reset the css by using following code in your style.css file:
* {
padding: 0;
margin: 0;
}
I also attach screenshot of your code with this where your code shows add to cart button in the center.
Yesterday I posted a question and some people responded very nicely. However I have tried everything you said and nothing seems to be working.
It does work if I give the image a width, but only if that width is smaller than the actual parragraph (500px). My image is bigger than that. I have tried to change the width in the image (adding a class to the image and then specifying the image's width in the css and still not working, even writing !important before the semicolon)
I am gonna paste the entire's "website" (is an easy one page Resume) code so you can see more clearly what might be wrong.
I want the image to be centered and maintain its original size:
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
<link href="http://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Playfair+Display:900" rel="stylesheet" type="text/css">
<style type="text/css">
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
</style>
</head>
<body>
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
</body>
</html>
Thanks!
Just set the width 100% in image. It will automatically adapt with the parent width.
body, h1, h2, h3, p {
margin: 0;
}
header {
padding-top: 120px;
padding-bottom: 120px;
background-image: url('http://bit.ly/1FV66V8');
background-size: cover;
font-family: 'Playfair Display';
text-align: center;
color: #DB5175;
}
h1 {
font-size: 72px;
}
h2 {
margin-bottom: 40px;
font-size: 24px;
}
h3 {
margin-top: 70px;
margin-bottom: 70px;
border: 2px solid #ffffff;
display: inline-block;
padding-right: 30px;
padding-left: 30px;
padding-top: 15px;
padding-bottom: 15px;
text-transform: uppercase;
letter-spacing: 2px;
}
main {
padding-bottom: 100px;
background-color: #DB5175;
font-family: 'Roboto';
color: white;
text-align: center;
}
p {
padding-bottom: 20px;
width: 500px;
margin-left: auto;
margin-right: auto;
line-height: 160%;
}
<header>
<h1>Name Surname</h1>
<h2>Blogger</h2>
<p>
<img src="https://lh4.googleusercontent.com/-AhzOzjiqgqg/UMIP9ONtHsI/AAAAAAAACzM/GzwcSFumocs/s65/facebook.png" alt="Facebook Icon" />
<img src="https://lh5.googleusercontent.com/-E4DPgG0jOhk/UMIP81ijQ1I/AAAAAAAACzI/5jFodl9F9N4/s65/twitter_bird.png" alt="Twitter Icon" />
<img src="https://lh6.googleusercontent.com/-mswXpGilY98/Ugp9MeFO_pI/AAAAAAAAER0/nhReers_OJg/s64/instagram.png" alt="Instagram Icon" />
<img src="https://lh5.googleusercontent.com/-DMXeFEjNoV8/UMIP9F6SnJI/AAAAAAAACzQ/itYWZIxvOuw/s65/pintrest.png" alt="Pinterest Icon" />
</p>
</header>
<main>
<h3>Background</h3>
<p>I've been rolling solo since 2014, but previously jammed with a bunch of tech startups like Dropbox, Codecademy, and Treehouse. My recent work is a departure from my product-centric past, focusing on 3D illustration, animation, and motion design.</p>
<p><img src="http://los40tuxtla.com/wp-content/uploads/2015/05/nrm_1410437342-blake-lively-gucci-hp.jpg" width="100%" alt="Foto Blanca"/></p>
<p>That's kind of what it's all about, y'know? Feeling out our path, taking creative risks, and knocking it out of the park without taking it too seriously. I get into specific tactics and proven strategies, but it's also an ongoing conversation about growth, meaning, and happiness.</p>
<p>I've met lots of creative and curious people through my newsletter, where we talk shop and share experiences. I'd love to meet you, too!</p>
<h3>Philosophy</h3>
<p>I'm a lifelong learner and love to gather new skills and study extraordinary people. I believe 1) being exceptional is often just putting in more effort than anyone expects, 2) releasing our ego is a prerequisite for growth, and 3) life is too important to take seriously. Party on!</p>
</main>
Thanks to all.
I wanna answer what I did in the end in case it helps someone else in the future.
The teacher/class said to "wrap" the image in a p. Following #Fabian Lurtz's adice in changed the p for a div.
Then in the css, following #Alvin Pascoe's advice in this thread: http://bit.ly/1OniMMl
I added:
.div {
display: block;
margin-left: auto;
margin-right: auto;
}
If my "website" would have had more divs I could have just setup a class or id
Hope it helps. Thanks again to all!
If you want to set the width to 100%, just set the width to-
max-width: 100%