How to fix this image in bottom middle? - html

I have this site:
link
I put a picture more clearly understand what they want to do.
CODE HTML:
<div class="col-md-12 text-center">
<img src="wp-content/uploads/2015/10/scroll.png">
</div>
There is positioned in that position ... and I did these things with bootstrap, somehow you know how to fix this problem?
This picture must always be there regardless of resolution
Thanks in advance!

Try the following.
Add position relative to the container
.about-content-top{
position:relative;
}
Add position absolute to the images and set bottom to 0
<div style="position: absolute; bottom: 0px;" class="col-md-12 text-center">
<img src="wp-content/uploads/2015/10/scroll.png">
</div>

Related

How to remove space from container

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/

alignment of basket in Shopify Mobile View

I seem to be having an issue with aligning the basket on the top row when viewing my site on a mobile. For some reason, this sometimes appears at the top and sometimes appears at the bottom and I cant work out why this is and where I need to amend the code in order to fix this.
Would really appreciate if somebody could advise. I have attached an image to show this from a mobile and the site itself can be seen at:
[https://defineclothing.co/][]1
I wonder why it even works sometimes ;)
This div <div class="col-xs-12 col-sm-12"> has a relative positioning and <div class="top-header "> an absolute positioning.
Absolute positioned elements are positioned relative to the first positioned parent (which means relative, absolut or fixed). In order to achive the behaviour you want simply reset the relative positioning of <div class="col-xs-12 col-sm-12"> to position: static
<div class="col-xs-12 col-sm-12">
<div class="top-header ">
....
</div> <!-- End Top Header -->
</div>

My image div taking up the entire top section of the browser, how do I fix this?

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

How to make an image stay exactly at the screen left side in Bootstrap, without ruining the text in the same row and its responsiveness?

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

Putting text on bottom of Bootstrap row next to image

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.