I'm trying to use a CSS grid from this page, but I can't seem to figure out how the outside margins of the layout is done.
How do you define the content such that it scales responsively up to a certain width, then becomes a fixed-width, centered layout when the window is larger than that size?
http://www.responsivegridsystem.com/
Related
I am trying to disable the stretching of widgets in my QScrollArea's vertical layout.
I would like to have a scroll area which resizes it's contents horizontally to fit the scroll area's width (so that the whole widget is visible), but has a scrollbar vertically if needed.
I only managed to achieve this by setting my widgets width so that it fits without a horizontal scrollbar getting added.
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
I need 4 images to fit in a row with comfortable margins in ionic so I used col-25 for it, However, images look quite contrived with no margins. How can I have my images adapt to the div size available with required margins?
I tried using col-20 grid and in that case images overlap with each other.Using col-33 renders images with pretty good padding and margins but fit in 3 images in a screen as expected.
Demo:
http://play.ionic.io/app/5a918b3bb92f
Set the width of the image to 100%
img {width:100%};
Check http://play.ionic.io/app/991572fd1202
I am trying to position a logo just above the nav overlaying a responsive carousel. The trouble is, depending on the window size, the logo doesn't stay anchored to the nav. I don't know how to even approach this problem. Here is the project I am currently working on. Is there even a way to accomplish this?
The problem is that your logo (I assume you meant the transparent white round logo) is absolute positioned to the top of the browser, AND you're trying to make its position move with the resizing carousel. Try moving the logo inside the #slider1_container and absolute position, bottom:0 (instead of top:0)
This will force it to stick to the bottom of the carousel, regardless of the height of the slider, so it will appear to move with it.
Then, you've got the issue of resizing the logo to shrink with the window as well. If you set the logo's width to a percentage, and its height to auto, with a max-width set to whatever the greatest size you want to allow it to become, then that should manage that.
I've created a few vertical menus in the past on bootstrap using the dropdown-menu compontent. To make it a megamenu I would have to specify a specific width for the submenu to flyout to - a definitive width. This is because the vertical width(parent) is too small.
The problem is the content is dynamic, so it would be good to have this width flexible - by using %'s, as at the moment we have to mould the content to fit the menu. If I add the col-lg-12 class to the submenu it will only be 100% of its parent width (the vertical width), I can't increase the vertical width as this would span across the page.
I want something like this - http://geedmo.github.io/yamm3/
However, the yamm3 example is a horizontal nav, therefore the parent is already spanning across the page to give the submenu a huge range to add whatever col-lg-?? it likes.
Does anybody know how to turn the Yamm3 example into a vertical navbar but keeping the flexible mega-submenu width without being restricted by its parent?