Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
On my website I have 2 col-xs-6 inside a row. Both columns have an image in each and I want to add text over the top that will move when they do due to img-responsive, however the text doesn't seem to sit in the div but instead on top of it, heres a snip of the code http://www.bootply.com/zVc28CKWFW
Edit: this is not my website but a small snippet of it hence the single col-xs-6
Edit 2: I want my text to stay centered on top of the image when the image is resized, see http://www.triplagent.com/ for a working example, when the browser is resized the images resize as well as the image stays centered on the image and moves with it, this is what I want to achieve.
Your h2 tag is fine, the reason it's not sitting flush with the top of the container is because it's inheriting the browser default margin/padding. If you override these it will sit flush:
http://www.bootply.com/tBlXOzGBde
UPDATE:
http://www.bootply.com/wgihndvcP1
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
Im trying to only show a piece of this img (the laptop). The hidden part being on the outside of the page. How do i make it so it doesn't actually expand the page where you can then scroll horizontally?
Hi Depending on how thing is built, if its in the background image then you will need to use background-position when it goes into a smaller screen resolutions.
If this is an actual then this can be tricky because there is a few options. you can set the parent wrapper to have overflow:hidden and use margins to tuck move the laptop to only be shown.
You can also probably use position absolute to move the image into position.
If you want this to be only a mobile thing make sure you wrap it around a media query
#media only screen and (max-width:768px) {
.myclass {
css: value;
}
}
If you can share some mark up with some css we can better help you :)
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
I'm learning how to make a website and I've finished my first page but for some reason I always see a white space on the side of the site, with a scroll bar to scroll to it. When I tried checking the site on a smaller screen, I noticed that my image goes beyond the border, so that's probably the issue. It shows up like this:
with that code being the only place where I've included the image, the code is:
<div class="col-md-6 text-center">
<img src="Images/home.png" class="img-flui">
</div>
and this is what the page looks like in full mode:
no idea what the issue is.
I've attempted to change the size of image and I've also tried to check if there is some other image whose size is bigger than it should be but I don't see anything, the full code is 200lines long not sure if i should share it
not sure if this will help anyone in the future but I had a typo in"<div class="container">, I typed contianer instead, I corrected it and the side space disappeared.
If you dont want to mess with css just set the image width to "80%" instead of fixed value. this will make the image with depend directly on its container width. You may also be interested in object-fit css property
More info here: https://www.w3schools.com/css/css3_object-fit.asp
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
I want a footer bar that sticks at the bottom of the page, which I currently use "position:fixed" issue is I have a div that I want to take up the whole area above the footer, the problem is though the bottom part of the div gets overlapped due to the position:fixed. When I remove position:fixed, the page requires scrolling.... can anyone give me an example of how to properly create a footer that stays at the bottom of the page without overlapping over elements and creating a scrollbar? I am using bootstrap 3.
Add a margin-bottom to the last element before the footer which is at least as large as the footer is high.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
Hello I would like to know how I can make 2 div's one hovering another in this case the left is hovering the right one but the elements like button's etc to be active on the both div's the left one to have priority. Bellow is my code where the left div is overtaking the right div.
I have 2 problems. the right div 1. all his buttons are becoming inactive on the right div. I want them to be active and the height of it to be complete because now since it is on the back the footer is overlapping it.And at the same time the left div to be over the right one but only it's area to be active like buttons and etc.
<div class="left"></div>
<div class="right overlap"></div>
<footer>footer</footer>
CSS:
.overlap {z-index: -1; position: absolute;};
if i understand correctly you are looking for something like this:
[https://jsfiddle.net/9mwb8gx2/][1]
[1]: https://jsfiddle.net/9mwb8gx2/
If i understand correctly, you want the right div to partially overlap the left div. but you are trying to put the z-index for the entire div. you just need to put multiple div inside the left or right div and then put the z-index accordingly.
If you are trying to achieve pop-up with z-index, i recommend you put more code in your question so that we get what you are trying to do, a fiddle will also be helpful.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I am stuck trying to fit my image grid into one page. One page means visible page or just adjusting the container of the grid so I can fit it on the screen accordingly.
Target Website: test.ebdesigns.us
Target Grid Starts With:
<aside id="listify_widget_taxonomy_image_grid-6" class="home-widget listify_widget_taxonomy_image_grid">
<div class="home-widget-section-title">
<h2 class="home-widget-title">Our Popular Categories</h2>
<h2 class="home-widget-description">Our Popular Categories</h2>
</div>
I am trying to display it all on one page. When I try to set the width of the individual grids to height: 150px nothing happens.
Could you please help me fit the grid in one page?
It looks like on that website it isn't the height that adjusts the grid size, but the padding. Try .entry-cover.has-image{padding:50px;} or something like that. I tried it in the dev tools and you'll also probably want to adjust your font size to like 20px or something.