I have a container on my landing page and it makes white space. I want it full screen. I try to make the top and right 0px, but the right still edge.
This is what looks like
And this is what I want
The code
<section class="zerra-porto">
<div class="container">
<div class="row">
<div class="col align-self-center">
<h1 class="mb-4">
Hi, My Name is <br />
Sumnit Parfit
</h1>
<p>A Front End Developer</p>
Get to know
</div>
<div class="col">
<img src="/images/foto.png" alt="" class="landing-pic" />
</div>
</div>
</div>
</section>
.zerra-porto .landing-pic {
position: relative;
right: 0px;
top: 0px;
z-index: -1;
}
Can you please check the below code? Hope it will work for you. Based on your question, we have understood that you need your content inside the container but you want your banner image outside the container, for that, we have made modifications in your HTML structure and positioned the Image in right as per your required screenshot.
Please refer to this link: https://jsfiddle.net/yudizsolutions/zgcydft1/
Related
I have this logo on the website, which is positioned in the center between the navbar menus.
Here's a picture:
Logo Position
The problem is that the logo moves when I switch to a different monitor or resolution. Am I doing something wrong? How do I make it fixed between different resolutions.
Here's the html code:
<main class="site-main">
<center><img src="img/corelogo.png" alt="Post" height="180" width="180" style="position: absolute; top: -1px; left: 570px; margin: 0 auto;"></center>
<section class="hero_area">
<div class="hero_content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>TeamSpan Global Solutions</h1>
<h2>Your partner in building satellite workforce teams.</h2>
</div>
</div>
</div>
</div>
</section>
First of all center tag has been deprecated. Secondly, you're positioning it 570px left of the right edge of the first positioned (not static) ancestor element. I can't see what styles are applied to your classes so I can't see what that would be. But it would definitely move around based on resolution.
Have you already heard about Responsive Design?
Look, you have to post your css too! Can you write it on jsfiddle?
Some examples:
https:// codepen.io/bootstrapped/pen/dGPZvR (remove space)
https://www.bootply.com/mQh8DyRfWY
https:// codepen.io/davidcochran/pen/Fkwys (remove space)
I'm making this little website, and I'm trying to make user profiles. I'm honestly not the best with HTML and CSS but basically, my problem is, that I want to display the profile picture in the top left of the "jumbotron" (I'm using bootstrap), and have the username just to the right of it, with a little paragraph/quote/motto beneath the username. However, I cannot get it to work.
Here is my current code:
HTML
<div class="container">
<!-- Profile Jumbotron-->
<div class="jumbotron">
<div class="profile-picture">
</div>
<h1><?php echo "$profile_name" ?></h1>
</div>
</div>
CSS:
.jumbotron {
margin-top: 5%;
margin-bottom: 2%;
}
.profile-picture {
width: 200px;
height: 200px;
background-color: white; /* Just as a test profile picture */
}
Here is the result of this code
I have tried to right-align the text, but to no avail.
Of course, there's the obvious float:right, which works well enough, but then the height of the jumbotron gets all screwed up! Unless I am doing something wrong with that.
So with all that said, I hope someone can help me, as you seem pretty helpful here!
Thank you for taking the time to read my issue, and I hope you can assist me in fixing it!
<div class="container">
<!-- Profile Jumbotron-->
<div class="jumbotron col-md-12">
<div class="profile-picture pull-left col-md-5">
<img class="img img-responsive" src="Your image" style="width:200px"/>
</div>
<h1 class="pull-right col-md-7">
<?php echo "$profile_name" ?>
</h1>
</div>
</div>
.profile-picture {
background-color: white; /* Just as a test profile picture */
}
I think something like this would do the trick since you are using bootstrap framework. Note the css classes I have put pull-left and pull-right. col-md-5 and col-md-7 are used to divide the div columnwise.
by using img-responsive you will be able to proportionally align image inside the div.
You can do one easy thing (picture, name and quote are all divs):
<------------------- LARGE DIV ------------------->
<---PICTURE(float:left) NAME(float:right)
<br>
QUOTE(float: right)
<------------------------------------------------->
How to accomplish this:
<div id="profileContainer" style="width: 800px;">
<div id="picture" style="width: 200px; float: left;"><img src="yourimage.jpg"></div>
<div id="name" style="width: 400px;"><?php echo "$profile_name" ?></div>
<br>
<div id="quote" style="width: 400px; float:right;">Text about stuff</div>
</div>
So basically you have the profileContainer div with a width you want, the picture with the width of the div being the picture size and the name floating to the right. By changing the profileContainer width you can get the name closer to the picture, or you can also set a margin-right: #px; on the Name and the Quote.
My image div seems to be taking up the entire top section of the browser, I am not sure what I did wrong, but in order to make the text align within the image, I will have to add top:250px, that doesn't seem right to me. Here is my code: http://jsfiddle.net/Swathi56/zzbwkoLj/1/
I have attached the image for your reference.
<div>
<div class="hero-image-download col-xs-12">
<div class="overlay"></div>
<div class="hero-text-download text-center">
<h1>aspenONE Download Center</h1>
<h2> Download your UPGRADE now!</h2>
<p>Simply select software suite and you need to start using the latest version.
It’s fast and easy</p>
</div>
</div>
<div class="engineering-section">
<div class="engineering-section-title title-text">Engineering</div>
</div>
</div><!--end div-->
Remove top: 250px; from your text and set their parent DIV's (.hero-text-download) position to absolute and align it to the bottom of it's parent DIV (bottom: 0;).
.hero-image-download .hero-text-download {
position:absolute;
margin:auto;
bottom: 0;
}
http://jsfiddle.net/zzbwkoLj/2/
Remove
background-size:cover
height:500px
from the .hero-image-download class styling.
After this you do not need to add top:250px in the text containers.
I hope this will help
I want an image to stay exactly on the left side of the screen(fix it to the left side). I want the image to "start" from the screen's side. I managed to do this with
position:fixed; left: -15px;
and it works from the viewpoint of the image, it starts at the screen's left side exactly on every screen I tested.
BUT it ruins other things, namely the text on the same row will be on top of the picture, AND if I decrease the windows/screen size it will become more of a mess with the text.
What's a better solution?
My code:
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="img/img1.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="img/logo.png">
</div>
</div>
I want the first picture, so img1.png to be on the left, the title should be in the middle, and the logo.png on the right. The second image, the logo.png doesn't need to be fixed to the right, just img1 to the left.
I tried to provide the all the info you need, but I'm new here so please tell me if there's anything more you need!
Thank you in advance!
EDIT: Added fiddles.
As you can see, the black image does not start at the screen's left side exactly here:
http://www.bootply.com/bGJhH27MQO
The next fiddle shows you how the black image should be positioned, but it ruins the site:
http://www.bootply.com/sFeKODGOSq
Actually, your html almost works. As you found out, using a fixed position within Bootstrap's grid system doesn't work very well.
Rather than trying to fix the <div> to the left edge, you should try fixing the image to the left edge. You don't need to use absolute positioning to do it. You can use a negative margin-left value to shift the image to the left. See updated code below
#swoosh {
margin-left: -15px;
}
<div class='container-fluid'>
<div class="row outerDiv">
<div class="col-xs-3 col-md-2 imageDiv" >
<img class="img-responsive" id="swoosh" ...
The actual value of the margin-left value is a little fuzzy. The value of -15px is to offset the padding-left value in the Bootstrap's col-xxxx classes. You will need to adjust the the value to meet your needs.
I've created a working version at JSBin
Okay, you have the row element within a container - so unless you use negative margins you won't be able to move the element the whole way across. You could place that row within a container-fluid element which will remove the restrictions on the location but it would stretch the element the whole width of the screen
<div class="container">
<div class="navbar navbar-default">
<p>Navbar Code Here</p>
</div>
</div><!-- /.container -->
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="swoosh">
<img class="img-responsive" src="http://vignette3.wikia.nocookie.net/uncyclopedia/images/7/71/Black.png">
</div>
<div class="col-md-6">
<h1>Title of the website</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="http://globe-views.com/dcim/dreams/red/red-01.jpg">
</div>
</div>
</div><!-- /.container-fluid -->
You can then remove the padding on that left image by applying
#swoosh {padding-left: 0;}
to your css.
If you need to change the alignment of the columns in responsive views, you should start taking a look at http://getbootstrap.com/css/#grid-example-mixed-complete to change the layout at the viewport reduces - perhaps using col-xs-6 etc to achieve the alignment you are after
I have a row where I have one 2-wide column for an image and a 10-wide for other content (navbar, etc.). The text is separate from the image as desired and on the same row, but I want the text to be on the same 'line' as the image (on the same horizontal plane as the bottom of the image). I've tried absolute-relative positioning and many other methods but I cant seem to get it working. What's the best method?
<div class="row">
<div class="col-md-2">
<img src="../logo.png" width="100%" height="100%">
</div>
<div class="col-md-10">
<p>test text</p>
</div>
</div>
Add a class to the second div like this.
<div class="row">
<div class="col-md-2">
<img src="../logo.png" width="100%" height="100%">
</div>
<div class="col-md-10 position_me">
<p>test text</p>
</div>
</div>
And now you can add something like this:
.position_me { position: relative; } .position_me p { position: absolute; bottom: 0; left: 0; }
Now your text should be at the bottom of the image.
I guess you want to add caption on top the image.
Try using the css float element.
img{
float:right;
}
If this does not work try setting the row position type to relative position and the col objects to absolute position so you will have control within the row.
I hope one of those methods will solve your problem. And if not take a look on this site: http://webdesign.about.com/od/graphics/ht/caption_images.htm
which explains how to add captions on images using css.