I'm trying to create a grid of categories for this site: http://oranjsushi.com/test/menu.html
Problem is, I can't get the boxes to center after the breakpoint.
Any ideas?
Related
I am trying to achieve something, I want a main container and a sidebar at the rightside. which should deal with mobile layout as well, I was unable to find such thing or make it. The blue print is given in the image below. Thanks
BluePtint of what im trying to make
You can create this layout using div's with different ids or classes- your main body(red) could go in a div with class "#mainbody" and your sidebar(blue) would go in another div with class "#sidebar", then you can specify the dimensions in CSS.
Have you checked out a CSS framework like Bootstrap? Bootstrap makes it super easy to specify column widths with their grid system, so instead of having to state px or % width in CSS, you can add the class "col-md-3" to a column for a width of "3". Their system is based on units of 12, where 12 would be a full bar, 6 would be half etc: https://getbootstrap.com/docs/4.0/layout/grid/
I'm just getting started using the Zurb Foundation 6.4.3 XY Grid. I'm having some trouble conceptualizing how I would do the following:
On large screens, my site should look like this:
On small screens I'd like Panel B to come first, and have a fixed height of 300px:
I have a Codepen of all this here: https://codepen.io/rbrtmrtn/pen/vWYKQP
Right now there are two issues with how this appears on small screens:
I'm not sure how to make Panel B appear above Panel A when that grid-x gets collapsed.
Panel B is a web map which requires a fixed height or some kind of autosizing (like Flexbox grow) in order to work. When I resize the site and collapse the grid-x the map disappears, probably because Foundation is trying to fit the cell to its content and there is none (the map behaves more like a floated element).
Would appreciate any help sorting this out.
A coworker steered me in the right direction -- the answer was to use source ordering, which allows you to specify the order in which elements appear on different screen sizes.
I am currently using a Hierarchical Kendo Grid. You can see some exmples from kendo what I am trying to acomplish foud at this link: http://demos.telerik.com/aspnet-mvc/grid/hierarchy .
Now I have it all working properly as I want, except for how it renders. I have over 15 columns in the child grids within each row, and when I do a horizontal scroll to view them all, the styling all falls apart on the kendo UI.
If you look closely you will see that once a scroll occurs the headers of the parent rows do not stay fixed with the data, and the child grids, the rows extend beyond the rendered view. Has anyone come across this issue, and does any one know what I can do to address this?
If the child grid columns do not fit due to their number or large widths, then enable scrolling for the detail grids.
http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#width
I'm having trouble thinking through a proper grid layout for part of a landing page. My issue is with the arrows as shown. The blue/green boxes show the row/column layout I have currently. I have thought about putting the arrows in their own columns but then the "Step X" and summary text won't flow into the arrow columns. The important part is that the images and the text in each column properly line up, especially when switching to single-columns on mobile.
Any advice is appreciated.
I am trying to create a grid layout of images kind of like how google images does it.
I want to add fixed sized images left to right, top to bottom but I am having trouble is figuring out when adding another image to a row would make it not fit and then decide that that images should be placed in a new row.
Also when the window resizes it should move images into/from rows based on how many it can fit in.
Ive got a scroll area with a grid layout in it which is fine if I know what can fit, but I can't figure out how to make it move items if say the window width is shrunk, and say an item needs to be moved down 1 row which moves other etc.
Assuming you are using QWidgets I'd suggest you to use QListView which does the layouting for free, if you want more control on how items are displayed use a QItemDelegate. For QListView the view mode should be set to QListView::IconMode so that you have a grid of items and not a list.
But if you are using QtQuick things are much easier, a GridView with Image delegates would do what you want really quickly and using GPU power to build you UI.