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.
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
There is extra white space in the right of the body which appears only on mobile screens despite that i'm making overflow-x :hidden to the html and the body tags and all the page is the same width
html,body styles
//css file link
https://github.com/Jjemy/Landing-page/blob/main/src/App.scss
I think the max-width: 100vw, is affecting the width. Try taking it out as this may be the cause of the problem.
I've figured the cause out ..
I'm giving some images a position absolute and when i change it the problem disappears but this affect the images position,
is there any other option?
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
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.
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