I see the Compare Two Images from https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_image_compare. And, I have made it to displayed it on multiple rows and columns but the images are overlapping when showing on a smaller screen. How do I make it a responsive grid?
Related
I'm trying to do something but I don't know if it's actually possible.
This is what i would like to do:
I want to create the same mosaic image with defined columns and rows for all screens (CSS Grid template).
I explain:
I have a mosaic image with 5 columns and 5 rows (so 20 images).
Whatever the screen, I would always like to keep this same number of columns and rows. What would change is the size of the image, the smaller the screen, the smaller the squares of the mosaic and therefore the images are very small and vice versa...
Is it possible to do this or do I have to create a specific template for each screen?
Thank you for yours answers.
I have an object with keys and values that I want to represent in a responsive way so that are always next to each other, but two k/v entries are stacked because of overflow on the horizontal direction, they will be aligned like a table.
Here is an example of what I am trying to accomplish:
This looks close to what I want, but does not account for the content size. max-content does not work
This also touches on it but recommends flex instead, but flex rows are all calculated independently so that rules that out.
I have the following layout set up in react with a flexbox:
Ideally I'd like them to align themselves left to right and cover the gaps - i.e. from the above example there are two gaps under the smaller boxes and two smaller boxes below them, would like those boxes to flyp up and fill in the last two spots.
Not sure what sort of algorithm or idea I'm looking for here, it also has to work for arbitrary boxes (though I can control for alimited range of sizes)
I am new to html,css, bootstrap.
Is there anyway we can assign different number of columns to a div based on resolution range for large device?
lg (for laptops and desktops - screens equal to or greater than 1200px wide)
But can I assign different number of columns for widths between 1200-1300px and 1300px-1400px ?
Please have a look at the below image. This is how the Ui should look like. On left hand side there would be a form with four columns- 1st and 3rd column contain labels and 2nd and 4th column contain input controls.So each of these column is assigned col-lg-3.
Now the issue is , when width is around 1250px, the left hand side form looks fine(but it needs 6 columns) but in that case grid is not able to see all the columns without horizontal scrollbar.
But if the resolution is around 1400px, then distance between labels and controls are too much and also there is a lot of empty space around the controls within left hand side form. So I was looking for a solution where I can assign the number of columns based on resolution
You can use Bootstrap v4 to achieve it.
For more information:
https://getbootstrap.com/docs/4.0/layout/grid/
You can create media queries to affect the current columns at different screen widths. Or you can create a new set of classes, like .col-xxl-2 and give them a different percentage width, like 20% and put them in a media query targeted to the size you want. So then a div could have <div class="col-xs-12 col-sm-8 col-md-6 col-lg-4 col-xxl-2"></div> and so on. I don't know if this is really necessary though, constraining it to only a 100px difference (1300-1400), because lots of computer screens go beyond that size.
Edit
If you add form-inline to your form and wrap your label + input inside a form-group, it should put them on the same line with proper spacing, no matter what the size.
I have a table with a varying number of rows and columns and I'd want to adjust the size of the table so that there is no extra white space.
What I've tried to do is:
myTable.setSizeAdjustPolicy(QtWidgets.QAbstractScrollArea.AdjustToContentsOnFirstShow)
This works well but if the window is fixed or there are too many rows to show. Then suddenly there will be scrollbars that appear and block the view of some of the table data. I would want the scrollbars to be to the side of the table and not on top it.