I'm trying to center my title so I used white-space: nowrap; so it didn't stack and it appeared in one line but now it won't center. So there is the CSS code for the title and the appearance of it is fine, the only problem is that, instead of appearing centered, it starts from the center, and it keeps going right. So like, instead of " Meet The Seekers ", it does " Meet the Seekers"
My code snippet is:
.section-title {
font-size: 4rem;
font-weight: 300;
color: black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.2rem;
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
justify-content: center;
}
<div class="about-top">
<h1 class="section-title">Meet the <span>SEE</span>kers</h1>
<p>We are a team of young entrepreneurs, who decided it was time to modernize the way we search the web. A diverse group of unexpected talents came together to make SEE-Tool available to every web user.</p>
</div>
I'm not sure why you have justify-content: center in your code as it does not do anything there. You also don't need inline-block as span tag is not block element.
You may remove the display property and add text-align: center, so it will be centering your h1 tag.
.section-title {
font-size: 4rem;
font-weight: 300;
color: black;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.2rem;
text-align: center;
}
<div class="about-top">
<h1 class="section-title">Meet the <span>SEE</span>kers</h1>
<p>We are a team of young entrepreneurs, who decided it was time to modernize the way we search the web. A diverse group of unexpected talents came together to make SEE-Tool available to every web user.</p>
</div>
just use text-align:center
.section-title {
font-weight: 300;
color: black;
margin:0 auto;
margin-bottom: 10px;
text-transform: uppercase;
letter-spacing: 0.2rem;
text-align:center;
}
<div class="about-top">
<h1 class="section-title">Meet the <span>SEE</span>kers</h1>
<p>We are a team of young entrepreneurs, who decided it was
time to modernize the way we search the web. A diverse group
of unexpected talents came together to make SEE-Tool available
to every web user.</p>
</div>
Related
I am trying to align an icon right next to a text. I have used the :before tag but it doesn't seem to work? Is it because I am using google icons? Below is the code I want to replicate
.review {
width: 317px;
height: 25%;
}
.review h2 {
color: white;
font-style: normal;
font-weight: bold;
font-size: 30px;
line-height: 23px;
margin-left: 15px;
}
.review p {
color: white;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 16px;
text-transform: capitalize;
transition: 0.3s;
/* margin: 20px; */
}
<div class="review">
<h2>Reviews</h2>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p class="rec">Most Recent</p>
<p>Most Relevant</p>
</div>
Please google first before asking a question on SO. Just by googling your problem, I found your answer in the first link. It is another question on SO. Click here.
Just put both items inside a <div> element and use the css class display: inline-block as you can see in the example.
<div>
<i class="material-icons" style="color:#FFF9F9; font-size:20px; ">check_box_outline_blank </i>
<p style="display: inline-block" class="rec">Most Recent</p>
</div>
Sorry, Your Question is not very clear, but the use of google icons should not be an issue. My advice would be to use css grid for layout issues (since the code that you have provided is html and css).
Here is a helpful link:
https://www.w3schools.com/css/css_grid.asp
grid-column should solve your problem: have 2 columns, the first one for your image and the second one for your text. You can additionally add grid-row for better layouts
I think you want icon with links.
Put it inside the paragraph tag.
I need to align "OUTDOOR" word to center , pls help,
i m new to CSS.
for what i have tried,the "outdoor" is aligned to left , eventhough "Is where life happens" aligns center.
//here is my html part
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main"> outdoor</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
// here is the css parent element
.heading-primary{
color:#fff;
text-transform: uppercase;
margin-bottom: 6rem;
}
here is the child elements
.heading-primary--main{
display: inline-block;
font-size: 5rem;
font-weight: 500;
letter-spacing: 3.5rem;
}
.heading-primary--sub{
display:block;
font-size: 1.6rem ;
font-weight:800;
letter-spacing: 1.35rem;
}
The reason your text is not fully centered is because of the letter-spacing. The letter-spacing property also adds spacing after the last letter, making it so your "Outside" text does not appear centered. I figured this out by highlighting your text and noticing that there is extra spacing after your last letter. To fix this, you can add
margin-right: -YOURLETTERSPACING
to the element with the letter-spacing property to negate the extra space at the end. In your case (as shown below), I added margin-right: -3.5rem since your letter-spacing is 3.5rem for your main class and I did the same for your sub class (with margin-right: -1.35rem). Does that leave you with any questions?
.heading-primary{
color:#000;
text-transform: uppercase;
margin-bottom: 6rem;
text-align: center;
}
.heading-primary--main{
display: block;
font-size: 5rem;
font-weight: 500;
letter-spacing: 3.5rem;
margin-right:-3.5rem;
}
.heading-primary--sub{
display:block;
font-size: 1.6rem;
font-weight:800;
letter-spacing: 1.35rem;
margin-right:-1.35rem;
}
<div class="header__text-box">
<h1 class="heading-primary">
<span class="heading-primary--main">outdoor</span>
<span class="heading-primary--sub">is where life happens</span>
</h1>
This question already exists:
Is Inline Block Not Working Because Margins Are Set? [duplicate]
Closed 2 years ago.
I have a header and a "p" element that I want on one horizontal line. I've managed to obtain the desired result manually using CSS "position" function, but I would like to learn the proper way to do this so that both elements are mathematically aligned for future reference. I want the middle of each element to be on the same horizontal line, as one element has more height than the other. I tried using "display: inline-block" and that didn't work, perhaps because I have different margins set for each element but I'm not sure.
HTML:
<div class="head-one">
<h2 id="#about-me">About Me</h2>
<p id="cal">My name is Cal Cook. I'm 26 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about cryptocurrency, web design and SEO. I built this site to feature my work.</p>
</div>
CSS:
h2 {
padding: 75px;
margin-left: 30px;
font-family: 'Nunito Sans', sans-serif;
}
#cal {
font-family: 'Roboto', sans-serif;
border: solid;
border-radius: 25px;
padding: 10px;
margin-left: 350px;
margin-right: 250px;
position: relative;
bottom: 140px;
}
It's a perfect situation (like almost every other) for CSS_layout/Flexbox
.head-one {
display: flex;
align-items: center;
justify-content: space-around;
}
#cal {
max-width: 60vw;
border: solid;
border-radius: 25px;
padding: 10px;
}
<div class="head-one">
<h2 id="#about-me">About Me</h2>
<p id="cal">My name is Cal Cook. I'm 26 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about cryptocurrency, web design and SEO. I built this site to feature my work.</p>
</div>
CSS_layout/Flexbox
I would suggest removing all of your positing code. Use display: flex on the container and flex: 1 on the #cal element.
.head-one {
display: flex;
align-items: center;
}
h2 {
font-family: 'Nunito Sans', sans-serif;
white-space: no-wrap;
padding: 75px;
}
#cal {
font-family: 'Roboto', sans-serif;
border: solid;
border-radius: 25px;
padding: 10px;
flex: 1;
}
<div class="head-one">
<h2 id="#about-me">About Me</h2>
<p id="cal">My name is Cal Cook. I'm 26 years old and live in Boston, Massachusetts. I'm from NYC originally. I'm passionate about cryptocurrency, web design and SEO. I built this site to feature my work.</p>
</div>
My paragraph not well formated , there is diffrent whites space in end of each line.
p {
font-size: 15px;
color: #555;
line-height: 20px;
text-indent: 30px;
}
<p>An area of the site that we feel will be a great revenue stream is advertising from
companies related to the market or interested in the profile of people we will be
attracting.
We would want this to be maximised to get the best return for both parties without
making the site look too commercial. </p>
I want to remove all spaces in end of each line.
You should do some changes like:
p {
font-size: 15px;
color: #555;
text-align: justify;
}
it will work.
You can try to use this:
p {
font-size: 15px;
color: #555;
line-height: 20px;
text-indent: 30px;
text-align: justify;
}
<p>An area of the site that we feel will be a great revenue stream is advertising from
companies related to the market or interested in the profile of people we will be
attracting.
We would want this to be maximised to get the best return for both parties without
making the site look too commercial. </p>
try text-align: justify; css property:
p {
color: #555;
font-size: 15px;
line-height: 20px;
text-align: justify;
text-indent: 30px;
}
<p>An area of the site that we feel will be a great revenue stream is advertising from
companies related to the market or interested in the profile of people we will be
attracting.
We would want this to be maximised to get the best return for both parties without
making the site look too commercial. </p>
You need to add:
p {
text-align: justify;
text-justify: inter-word;
}
I have this following html codes.
<div class="box extend">
<h1>CLOUD SERVICES FOR SMALL BUSINESS</h1>
<figure><img src="myimg.png" /></figure>
<p>
<strong>Hosted Exchange Server</strong>
<strong>Cloud Server Solutions</strong>
<strong>Backup Servicesd Server Solution</strong>
</p>
</div>
and the css of the above html (updated css)
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
}
now the problem is the strong element has spaces between each other as supposedly it should not (base on my css set up), please refer to the image below
Is there anyway I could get raid or remove that space gap between each others element? Any recommendations, suggestions and ideas, I would love to hear! thank you in advance.
It seems making them display block kills the thin line
http://jsfiddle.net/5qqLR/2/
.box p strong{
font-weight: 700;
font-size: 20px;
color: red;
padding: 0px;
margin: 0px;
background: blue;
display: block;
}
After further research setting the parent line-height to 1 will solve this issue
http://jsfiddle.net/5qqLR/3/
.box p {
line-height: 1;
}
Take a look at here http://www.sitepoint.com/forums/showthread.php?824112-space-below-inline-elements-inside-a-block-element
Add to strong HTML tag:
white-space: break-spaces;