I am programming a web page with Bootstrap and in one of the pages I have a two column structure. On the right I have an image or several and on the left a text that is the description of the image. What I want to achieve is that when I scroll down to see the full image or all the images, the text accompanies me.
I tried to use position: fixed in the text or the affix attribute but it doesn't work since the text accompanies me but it is not seen in its entirety because it gets below the image.
You can find the page here:
http://clients.sabrinacouto.com/kiige/res_publica.html
If necessary I copy the css or the html code.
Any idea why this might be happening or if there is any other way to fix it?
Code:
<section class="row2 text-center col-md-12 center-block text-center">
<div class="col-sm-2 col-md-2">
<div class="projectext">
<p class="">Res Publica valimiskampaania graafilise stiili kujundus välireklaamidele ja trükistele.</p>
</div>
</div>
<div class="col-sm-10 col-md-10">
<div class="image">
<img src="images/Res Publica valimiskampaania kujundus.jpg" class="img-responsive pull-left" alt="web design app image";>
</div>
</div>
</div>
</section>
CSS:
.projectext{
position: fixed;
overflow:hidden;
}
Thank you very much!
Eliminate him
position: fixed;
and he will no longer be on you.When you use
fixed
it doesn't take into account the position of anything, but instead defaults to 0.0 of its available space.If you want to use
fixed
for the text to follow you with the page keep it that way but add amargin-left
in all your images (add it in a css class for the images).Specifically you could:
When you work with boostrap the images are supposed to be responsive so that they adapt to the resolution of the device
Bootstrap Images
as you will see in the article the definition of
class="img-responsive"
this will make the image adapt.
Regarding the text, evaluate what is commented here
More HTML & CSS: Images with Bootstrap
You will see that you can apply the style
class="pull-right"
to adapt it to the image