I am trying to make this image full size but why some space is remaining right side
CSS/HTML
/* Header */
.header {
background: url('https://picsum.photos/1920/1080') center center no-repeat;
background-size: cover;
}
.header .header-content {
padding-top: 15.5rem;
text-align: left;
}
.header .text-container {
margin-top: 3rem;
margin-bottom: 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div id="content">
<!-- start of header -->
<header id="header" class="header">
<div class="header-content"> //here give an class of that image
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="text-container">
<h1><span class="turquoise">StartUp Landing</span> Page Template Free</h1>
<p class="p-large">Use Evolo free landing page template to promote your business startup and generate leads for the offered services</p>
<a class="btn-solid-lg page-scroll" href="#services">DISCOVER</a>
</div>
<!-- end of text-container -->
</div>
<!-- end of col -->
<div class="col-lg-6">
<div class="image-container">
<img class="img-fluid" src="https://picsum.photos/1920/1088" alt="alternative">
</div>
<!-- end of image-container -->
</div>
<!-- end of col -->
</div>
<!-- end of row -->
</div>
<!-- end of container -->
</div>
<!-- end of header-content -->
</header>
<!-- end of header -->
</div>
I want to set this full image right side(question mark)
which place need correction
add the width and height to body and html in head.
html,body {
width:100%;
height:100%
}
.img-fluid{
width:100%
height:100%
}
.image-container{
width:<!--as you wish--> 20px;
height:<!--as you wish--> 20px;
}
Related
I am a HTML / CSS beginner and I can't fix a problem. My problem is that when I zoom in my footer follows me.
By the way, I am using bootstrap 4
html{
position: relative;
min-height: 100%;
}
.Footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px; /* Set the fixed height of the footer here */
line-height: 60px;
background-color: #f5f5f5;
}
<footer class="Footer">
<div class="container-fluid">
<div class="col">
<!-- Les lanngues (Footer) -->
<div class="col-lg-3 col-xs-2">
EN
GER
FR
</div>
</div>
<div class="col">
<!-- L'adresse E-mail (Footer) -->
<div class="col-lg-5 col-xs-5" id="EmailFooter">
<span class="">E-mail : asdpawd#bluewin.ch</span>
</div>
<div class="col">
<!-- Telephone (Footer) -->
<div class="col-lg-3 col-xs-6">
<span id="Tel-Footer" >Tél : xxxxx</span>
</div>
</div>
</div>
</footer>
Not zoomed in : https://prntscr.com/pi19m7
Zoomed in : https://prntscr.com/pi19v3
When I zoom in, it just stop into the button
Welcome to our community. It is better to use a felx-box than absolute.
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: none;
}
/* Other Classes for Page Styling */
body {
background: #000;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body class="d-flex flex-column">
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-black">Sticky Footer using Flexbox</h1>
</div>
</div>
</div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright ©</small>
</div>
</footer>
</body>
Setting the position to absolute may be the issue. This property will not be responsive to zoom ins and will remain in the same position regardless of the movement of other elements. Attempt removing the "position: absolute;" and instead giving the footer a margin-top if you want it to be spaced away from the content above.
I think that position: absolute is the issue here. Try to remove it and then run it. Sometimes working with position can be little tricky as well so try to get over with it and then apply your footer and see the results.
I'm trying to slightly rewrite my application. I have in the past only created applications with Sidenavs, however now I don't need it in a website i'm working on. The issue is I can't seem to find a way to remove the sidenav container without it breaking the background image, the nav bar being sticky, etc. I can't seem to find anything on material.angular.io that refers to anything like this or can fix this.
If anyone knows how to remedy this issue please point me to the documentation/ what I can change to fix this.
Github for the site
With Mat-Sidenav-Container
Sidenav container as a div
div with css taken from the sidenav container
Here is a quick fix
app.component.html
<!-- <mat-sidenav-container fullscreen class="sidenav-container"> -->
<!-- <mat-toolbar class="toolbar"> -->
<!-- <div class="social-media" id="discord" (click)="navigateToDiscord()"> -->
<!-- <img src="../../assets/discord.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="social-media" (click)="navigateToTwitch()"> -->
<!-- <img src="../../assets/twitch.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="social-media" (click)="navigateToTwitter()"> -->
<!-- <img src="../../assets/twitter.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="social-media" (click)="navigateToYoutube()"> -->
<!-- <img src="../../assets/youtube.png"> -->
<!-- </div> -->
<!-- -->
<!-- <div class="themeathon-name"> -->
<!-- <div class="name-span"> -->
<!-- <span>THEMEATHON</span> -->
<!-- </div> -->
<!-- </div> -->
<!-- </mat-toolbar> -->
<!-- -->
<!-- <stream-component></stream-component> -->
<!-- -->
<!-- </mat-sidenav-container> -->
<div class="background">
<div class="toolbar">
<div class="social-media-container">
<div class="social-media" id="discord" (click)="navigateToDiscord()">
<img src="../../assets/discord.png">
</div>
<div class="social-media" (click)="navigateToTwitch()">
<img src="../../assets/twitch.png">
</div>
<div class="social-media" (click)="navigateToTwitter()">
<img src="../../assets/twitter.png">
</div>
<div class="social-media" (click)="navigateToYoutube()">
<img src="../../assets/youtube.png">
</div>
</div>
<div class="themeathon-name">
<div class="name-span">
<span>THEMEATHON</span>
</div>
</div>
</div>
<stream-component></stream-component>
</div>
Added css class .background at app.component.css
.background {
background-image: url(../../assets/japan.jpg);
}
.toolbar {
top: 0;
position: sticky;
position: -webkit-sticky;
z-index: 50;
width: 100%;
background-color: black;
height: 70px;
}
.social-media-container,
.themeathon-name {
position: absolute;
top: calc(50% - 16px);
}
.social-media {
padding-top: 6px;
margin: 0 25px;
cursor: pointer;
display: inline;
}
.social-media img {
fill: #fff;
width: 32px;
height: 32px;
}
.social-media-text {
float: right;
margin-left: 6px;
}
.themeathon-name {
width: 100%;
text-align: center;
}
.themeathon-name span {
font-family: SAMURAI, Roboto, "Helvetica Neue", sans-serif;
font-size: 32px;
color: #fff;
letter-spacing: 10px;
display: block;
margin: auto 26%;
}
Is that what you are after?
Here is the screen when I move down
I made this landing page which worked fine. The background image covered the page and it looked great. I left it and came back a day later and it looks different. I can't see the reason for it. The image wont appear behind the text at all only in the header (check the picture).
<body>
<div class="jumbotron">
<div class="container">
<img src="images/logo1.png" class="logo img-responsive" align="right">
</div>
</div>
<!-- featured content -->
<div class="featured">
<!-- row for grid system / limit space taken by featured content -->
<div class="row">
<!-- use only 9 columns out of 12 for medium and large devices -->
<div class="col-md-9">
<h1> Christopher McConney</h1> <br> <br>
<h3> A creative front end web developer <br> Specialising in responsive and dynamic web pages</h3><br><br>
<p>
<a class="btn btn-default btn-lg" href="index.html"> Find out more </a>
</p>
</div>
</div>
</div>
<!-- footer-->
<div class="footer">
<div class="container">
<p align="right"> © Developed by Christopher McConney 2018 </p>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
The CSS is as follows:
.jumbotron {
background: url(images/background.jpeg) center center ;
background-size:100% 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
/*logo position and size*/
.logo{
width:85px;
height:65px;
}
.jumbotron logo{
margin-right: 30px;
margin-top: 10px;
}
/*set text colour*/
.featured{
color:lightgrey;
margin-left: 10px;
}
/* space between logo and title */
.featured h1{
padding-top: 60px
}
/*style button*/
.featured .btn-default{
font-weight:bold;
color: lightgrey;
background-color: darkgrey;
border-radius: 10px;
margin-top: 20px;
align-content:center
}
/*style footer*/
.footer{
background-color:rgba(0, 0, 0, 0.5);
color:darkgray;
font-size: 15px;
padding:10px; 0px;
position: absolute;
right: 0;
bottom:0;
left:0;
}
It looks like you closed your jumbotron DIV early. This is what you have:
<div class="jumbotron">
<div class="container">
<img src="images/logo1.png" class="logo img-responsive" align="right">
</div>
</div>
Move both </div> above after the .featured DIVs closing tag.
Well it seems that your .featured div needs to be nested inside your .jumbotron which has the background image. Currently you have it nested outside of the .jumbotron.
The new markup would look like this:
<div class="jumbotron">
<div class="container">
<img src="images/logo1.png" class="logo img-responsive" align="right">
<div class="featured">
<!-- row for grid system / limit space taken by featured content -->
<div class="row">
<!-- use only 9 columns out of 12 for medium and large devices -->
<div class="col-md-9">
<h1> Christopher McConney</h1> <br> <br>
<h3> A creative front end web developer <br> Specialising in responsive and dynamic web pages</h3><br><br>
<p>
<a class="btn btn-default btn-lg" href="index.html"> Find out more </a>
</p>
</div>
</div>
</div>
</div>
</div>
<!-- featured content -->
<!-- footer-->
<div class="footer">
<div class="container">
<p align="right"> © Developed by Christopher McConney 2018 </p>
</div>
</div>
This will also correctly place your Bootstrap .row inside the .container like it's suppose to be.
I want my banner to be centered and the logo above the banner. But as you can see both the logo and banner and not centered. How can I fix this?
HERE IS LIVE VERSION: http://codepen.io/anon/pen/waYBxB
THE HTML
</head>
<body>
<!--
==============================
LOGO HEADER
==============================
-->
<section>
<div class="container">
<div class="row">
<div class="col-md-6"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
<div class="col-md-6"></div>
</div>
</div>
</section>
<!--==============================
SLIDING BANNEER
==============================-->
<section class="Banner ">
<div class="container midText">
<div class="col-md-12 text-center hidden-xs"><img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive"></div>
</div>
</section>
<!--==============================
MENU BAR
==============================-->
<section>
<div class="container">
<div class="col-md-12">
<nav>
<ul>
<li>Home</li>
<li>Codepen.io</li>
<li>A longer button</li>
<li>This is my really long button</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</nav>
</div>
</section>
<!--==============================
MAIN CONTENT
==============================-->
<section>
<div class="container" id="MainPage">
<div class="row">
<div class="col-md-9 MainContent"><h3>codepen ---- CODING HAS NEVER BEEN SO EASY!</h3><br> Notice how the white is centered but he image and the logo is not. How do I fix this? </div>
<div class="col-md-2">I AM IN THE BANNER SECTION </div>
</div>
</div>
</section>
</body>
</html>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
THE CSS
body {
background-image: url(http://oi60.tinypic.com/2hhnpzn.jpg);
}
nav ul {
list-style: none;
overflow: hidden;
height: 47px;
}
nav ul li a {
color: #F9F7F7;
background-image: linear-gradient(to top, #ff6351, #ffcc6e);
padding: 8px 22px 8px 22px;
display: block;
text-align: center;
font-size: 22px;
float: left;
margin-right: 5px;
color: rgb(255, 255, 255);
background-color: rgb(120, 120, 120);
text-shadow: rgb(79, 79, 79) 1px 1px 3px;
}
.Logo {
margin: 15px;
}
#MainPage
{
background-color: white;
}
.midText
{
text-align:center
}
.MainContent
{
margin: 33px;
}
this would bring the banner image to the center of the page. What you have to do is to add the infront of the image.
<section class="Banner ">
<div class="container midText">
<div class="col-md-12 text-center hidden-xs">
<center>
<img src="http://oi58.tinypic.com/eb61xd.jpg" class="img-responsive">
</center></div>
</div>
</section>
You should take advantage of the column system to help center your divs.
If you know bootstrap rows are 12 column-widths wide, you need a row that = 12 columns.
So...
<section>
<div class="container">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
<div class="col-md-4"></div>
</div>
Now you have 4|4|4, but you could also do 3|6|3 or even 2|8|2 or 1|10|1. That should always center your divs. Hope that helped.
In case my mumbling makes no sense, here are pretty pictures with explenation: http://getbootstrap.com/examples/grid/
As you have a number of breakpoints, why not just set the width of the img in pixels? The aspect ratio of the img & the containing div are different, hence why it doesn't fit precisely.
display: block;
max-width: 1024px;
margin: 0px auto;
height: auto;
For the logo...
<div class="col-md-12"><img src="http://gvsfoundation.org/wp-content/uploads/2013/04/your-logo-here-27.png" class="Logo"></div>
.Logo {
display: block;
margin: 15px auto;}
Quick solution for you.
I want to remove the space above hr tag.now I get some unwanted space.I want to remove it.I want to start hr line where I marked in green.Please see my above edited question.This is my whole body section.
Css
hr {
margin: 0;
width: 1px;
height: 660px;
border: 0;
background: #fff;
float: left;
}
.sidemenu {
float: left;
margin-top: 150px;
width: 100%;
}
.content {
position:relative;
}
.side{
width: 24%;
float: left;
display: inline-block;
}
html
<div class="outer">
<div class="log">
<h1>Profile</h1>
<form method="post" class="lout" > <button class="logout" name="logout" >Logout</button></form>
</div> <!--End of log div -->
<div class="rest">
<div class="side">
<div class="sidemenu">
<div class="1 menu">
Profile
</div> <!--End of menu1 -->
<div class="2 menu">
Clients
</div> <!--End of menu 2-->
<div class="3 menu">
Employees
</div> <!--End of menu 3-->
<div class="menu 4">
Documents
</div> <!--End of menu 4-->
</div> <!--End of side menu -->
</div> <!--End of side div -->
<hr>
<!-- <div class="heading" >
<h1>Profile</h1>
</div> End of heading div -->
<div class="content">
</div>
</div> <!--End of content -->
</div> <!--End of rest div -->
</div> <!--End of outer div-->
Remove property margin-top i.e. margin-top: 150px;
from your class sidemenu :
Use the class mentioned below :
.sidemenu {
float: left;
width: 100%;
}
To align content to center, add below CSS class to outer
.outer{
margin-left:50%;
width:100%;
}
And you will see the desired output.
Give overflow hidden for outer wrapper
I assumed your HTML structure and CSS are as JS below:
<div class="wrapper">
<div class="sidemenu">
left
</div>
<hr>
<div class="container">
right
</div>
</div>
DEMO 1
As you can see with the different background color.
The padding of the outer wrapper is giving you spacing above the hr tag.
Removed the padding top/padding bottom for the outer wrapper use the padding within the sidemenu and content. As I use in JS below:
DEMO 2