How can i remove this space between body and right side of page?
See full code here: https://jsfiddle.net/4tqdejyx/
<div class="social">
<h4 class="social-text">#Social</h4>
<ul class="lista">
<li><i class="fa fa-facebook-official" aria-hidden="true"></i></li>
<li><i class="fa fa-twitter" aria-hidden="true"></i></li>
<li><i class="fa fa-instagram" aria-hidden="true"></i></li>
<li><i class="fa fa-youtube-play" aria-hidden="true"></i></li>
<li><i class="fa fa-pinterest-p" aria-hidden="true"></i></li>
</ul>
</div>
<div class="Contact-us">
<div class="contact-button "> <p class="dugme"><button class="cbtn">Contact us</button></p></div>
</div>
<div class="footer">
<img src="" class="logo" alt="logo"/>
<h4 class="bk-text2">Buddy/Kitty</h4>
<p>©All rights reserved!</p>
</div>
Set the container's or body's width property to 100% to cover the complete width of the browser window. I could be more specific if you shower your code or made a JSFiddle.
The left class has a left-margin of 2%
The right class has a right-margin of 8%
I think that's where the problem lies and not with the body. Change your CSS for right to the following and it should fix the problem you're seeing.
.right {
margin-right: 2%;
margin-left: auto;
float: right;
}
Also...
It looked like you were having some problems with lining up your <div class="social"> correctly, so I made some changes to those tags. I also aligned your login button to hug to the right side to be symmetrical with the play button on the left.
https://jsfiddle.net/dotspencer/4tqdejyx/5/
Related
please help me i am writing html document and having a problem. can you tell why my footer is not increasing from its edges even if i select width 100% please help
this code is not compelte i have not given css please click link at bottom to see my problem
enter code <footer class="footer-distributed">
<div class="footer-left">
<img src="https://i.pinimg.com/originals/b7/b3/96/b7b396047648c1baa436937d0afdfa76.jpg">
<h3>About <span>just do it</span></h3>
<p class="footer-links">
Home
|
Blog
|
About
|
Contact
</p>
<hr>
<p class="footer-company-name">
copyright © 2021 kaustubh krishna</p>
</div>
<div class="footer-center">
<div>
<i class="fa fa-map-marker"></i>
<p><span>find about us at our social media</p>
<div>
<i class="fa fa-envelope"></i>
<p>support#justdoit.com</p>
</div>
</div>
<div class="footer-right">
<p class="footer-company-about">
<span>About the company</span>
We offer freelance services for you and your company </p>
</div>
<div class="footer-icons">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-linkedin"></i>
<i class="fa fa-youtube"></i>
</div> here
link of document: https://codepen.io/kaustubh0711/pen/XWNdNrv?editors=1100
Your .small-container div has a max-width css style keeping it from taking up the entire width of the screen. You'll also have to remove the left and right padding from it or else you'll still have gaps on each side of your footer.
You have to close the .small-container and .row, they affect the footer.
<div class="small-container">
<div class="row">
... content ...
</div>
</div>
<!-----footer---->
I'm having a hard time working with UL LI items in a bootstrap set up. I'm trying to align them so that there are next to each other (horizontal) rather than being aligned vertically. Here's my bode:
<div class="container-fluid" style="margin-bottom:45px;">
<div class="row text-center">
<div class="col-lg-12">
<h4 class="text-center">FOLLOW US</h4>
<hr style="width:60%">
</div>
</div>
<div class="row ">
<div class="col-lg-12 d-flex justify-content-around" id="socialMedia">
<ul style="list-style:none;">
<li><i class="fab fa-facebook-f"></i></li>
<li><i class="fab fa-instagram"></i></li>
<li><i class="fab fa-yelp"></i></li>
</ul>
</div>
</div>
</div>
but i have not been able to get it to align horizontally. I tried to apply CSS to #socialMedia, like Float:left, display:inline but it's not working.
Right now they are positioned in dead center, and that's how I want them to stay.
Does anyone have any idea?
Use the d-inline class...
<ul class="list-unstyled">
<li class="d-inline"><i class="fab fa-facebook-f"></i></li>
<li class="d-inline"><i class="fab fa-instagram"></i></li>
<li class="d-inline"><i class="fab fa-yelp"></i></li>
</ul>
https://www.codeply.com/go/DaDD3njGFz
You said you applied the float to #socialMedia but that's the ul. You have to apply float: left on the lis. Add the float: left to #socialMedia li.
(If that still doesn't work, you have to make sure you have enough specificity to override Bootstrap. Last resort, add !important).
I was wondering why my buttons in the jsfiddle below and my line divider shown below in my jsfiddle isn't in line like my text on a mobile device such as the iPhone. For example, the outline of the buttons go each over each other and the line goes to the right side more and isn't equal on the users screen. How can I stop this from happening and ensure each part of the content on my web page is responsive/in proportion to what screen the user is viewing my site on.
Website code
Here is an example screenshot below of what I'm talking about.
As you can see in the code below, I have used bootstraps col could I have picked the wrong size of the container could this be the issue?
<div class="header1">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="header-content">
<h1 class="maintxt rotateInUpLeft animated">LIAM DOCHERTY</h1>
<h3 class="subtxt rotateInUpLeft animated">WEB DEVELOPER & GRAPHIC DESIGNER</h3>
<hr class="content-divider">
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Web Development Portfolio</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">GFX Design Portfolio</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">About Me</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Contact Me</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
You set a fixed width for hr class in CSS
.content-divider {
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0,0,0,0.2);
width: 790px;
}
This breaks the line divider on small screens.
For the buttons add a padding
ul.intro-social-buttons li {
padding-bottom: 10px;
}
https://jsfiddle.net/jktsmruc/3/
I'm attempting to create a footer for my first page in Bootstrap and it looks fine except the contents should be centered vertically. After inspecting the elements in Chrome, it looks like the actual container element is about 50% the height of the parent footer element.
Now I was able to partially fix this by setting the "line-height" to match the "height" property of the footer, but when doing so, it caused part of the contents to appear well below the footer. What am I doing wrong and how can I fix this?
Without Line-Height:
With Line-Height:
<!-- Site footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>
Home | About Us | Contact
<br />
© Website 2016. All rights reserved.
</p>
</div>
<div class="col-sm-6">
<p class="muted pull-right">
<i id="social-fb" class="fa fa-facebook-square fa-2x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-2x social"></i>
<i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-2x social"></i>
</p>
</div>
</div>
</div>
</footer>
CSS
footer
{
height: 100px;
background:#fff;
margin-top:20px;
line-height: 100px;
}
You can use display:flex + align-items:center to achieve that.
footer
{
height: 100px;
background:#fff;
margin-top:20px;
display:flex;
align-items:center;
}
jsfiddle
Try adding padding-top and padding-bottom instead of line-height:
footer
{
height: 100px;
background:#fff;
padding: 2% 0;
}
You can use table properties for vertical alignment.
HTML:
<!-- Site footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>
Home | About Us | Contact
<br />
© Website 2016. All rights reserved.
</p>
</div>
<div class="col-sm-6">
<p class="muted pull-right">
<i id="social-fb" class="fa fa-facebook-square fa-2x social"></i>
<i id="social-tw" class="fa fa-twitter-square fa-2x social"></i>
<i id="social-gp" class="fa fa-google-plus-square fa-2x social"></i>
<i id="social-em" class="fa fa-envelope-square fa-2x social"></i>
</p>
</div>
</div>
</div>
</footer>
CSS:
footer {
background:#fff;
margin-top:20px;
}
footer p {
margin: 0;
}
footer .container .row {
display: table;
width: 100%;
height: 100px;
}
footer .container .row > div {
display: table-cell;
vertical-align: middle;
float: none;
}
Working example: https://jsfiddle.net/62shy0ob/1
i made a list of blocks using bootstrap 3.0. but im having problems with the desired outcome. Please help, thanks.
Current outcome
Desired outcome
Custom style from current outcome
.list_comments{
list-style: none;
margin-left:-40px;
}
.list-comment-block{
width:33.33%;
float:left;
padding:5px;
margin-bottom:-15px;
}
Markup
<ul class="list-comments">
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
<li class="list-comment-block">
<div class="thumbnail">
<div class="caption">
<i class="fa fa-comment fa-2x pull-right text-success"></i><h4>A student said</h4>
<i class="fa fa-quote-left fa-2x pull-left fa-border"></i>
<p>Use a few styles together and you'll have easy pull quotes or
a great introductory article icon.</p>
</div>
</div>
</li>
</ul>
I have tried using position:relative, inherit too. I appreciate any answers
I think it would be easier to get the layout you want using DIV container elements instead of a UL. Then you can use CSS3 column-width to evenly align the thumbnails in a "masonry" style layout..
.list-comments {
-moz-column-width: 25em;
-webkit-column-width: 25em;
-moz-column-gap: .5em;
-webkit-column-gap: .5em;
}
.thumbnail {
display: inline-block;
margin: .5em;
padding: 0;
width:98%;
}
Demo: http://bootply.com/129218