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
Hey programmers..
I am in trouble.I want to make the gallery using html, css ,bootstrap. (I know js and also I am still learning).
I want to make it complete responsive but its not working as when I decrease the width the image that I store in div goes down.
I make the image responsive and div also responsive.
I know div is block element so it goes down.I also use span also but its also not working .You can see in pic that I have uploaded.
This contain multiple image in the row.
Things that i want , when i decrease the width of browser(medium device like laptop ~~1200px) to sm( ~~992px) the image size should drecease and after that the image shift to new line .and same for all view
this all thing apply for laptop user as the browser size decease the image hide.
**the image also shift down when width decease i don't want it, it so awakward **
If you are using bootstrap then copy paste this code:
<div class="row">
<div class="col-xs-6 col-md-3"><!--you can add more section like this-->
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
</div>
This will work definitely for you.
Related
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 1 year ago.
Improve this question
for Christmas I want to add snow to my website footer , something like this picture
https://assets.stickpng.com/images/5847d74ccef1014c0b5e4806.png
But I don't want to do it with image because it can't be responsive if I use image so I need a css code for that
I don't want to add snowflake , I'm already using this one:
https://codepen.io/DesignCodeBuild/pen/GyNVbY
I wan't to make website looks "It's a snow day and snow is sitting on the bottom of website"
So you can have the image responsive on all screens by using CSS.
First in your HTML you can remove the image and just have an empty Div. The Class dictates where your CSS code will come from (snow-image).
<div class="snow-image">
leave this empty as your image will soon appear here as a background.
</div>
Then in your CSS you could have something like this....
.snow-image{
background: url=(https://assets.stickpng.com.....);
bacgkround-size cover;
align-items: flex-end;
display: flex;
}
This will keep the image dimensions perfectly as a background of that Div rather than inserting the image dire3ctly to your HTML using <img>. It will also auto size to any screen width. Both of the flex commands (hopefully) make sure the snow bed image is positioned at the very bottom of it's parent Div. Hopefully then you can add that JS code you found at CodePen for the snowflakes and you're done :)
When you've done all this. If you cannot see the snow image it could mean the Div has no height. So you could add height: --px; to your CSS where -- is exactly the same number of pixels tall as your image.
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 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
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.