Im trying to convert my default category posts to a specific style as show in the image. I'm stuck at the css end and can't figure out a way. Can anyone guide me onto building this kind of layout css?
Using w3.css 12 column responsive grid to do this. You can specify grid space for phones tablets and computers.
See here.
My code...
Related
Are there any pre-build images that I could use when developing that will display a grid in the background of my browser?
This would make it easier to visualize the layout during development and make sure my design lines up correctly with a grid.
Does bootstrap have anything like this builtin that I can enable in the css?
If I understand you correctly you are looking for something like this?https://chrome.google.com/webstore/detail/bootstrap-grid-overlay/mnlklmelflkheijccafopdohgclfefcg
Apologies if this is not what you are after.
I need help with a CSS code. I run a photography website on wordpress and i have some problems displaying my pictures. There are 2 formats of pictures that are being displayed: landscape (1200 x 800 px) and portrait (595 x 853px). I want to group the tall ones 2 per row because they look so much better. I have about 40-50 images per post.
Is there any way to do this?
I've attached a demo of how i would like to result to be.
Thank you!
You can use a jQuery plugin such as Masonry or Isotope to do this - these are designed to arrange your items in a grid so that they fit nicely.
You will still need to get some HTML and CSS in place before adding the plugin to adjust the positions of the images, so you'll need to work off the plugin documentation or examples (or provide a code snippet).
It depends on how dynamic your posts are. If there's a way for you to know the structure of your HTML + CSS + content before-hand, then you can create a .tall-row class for the tall images and a .long-row class for the long images. And it's basically planning out the layout ahead of time. You can easily do this using traditional CSS, CSS FlexBox (newer), or CSS Grid (newest).
If the order of the images is going to be some-what dynamic (so you don't know when a tall image will render or when a long image will render) you can try CSS Grid'd grid-auto-flow: dense; property, which attempts to calculate the best overall fit for all of it's children. Only if this doesn't work would I suggest using a JS or jQuery plugin.
Here's an example of CSS Grid's grid-auto-flow: dense;
https://jsfiddle.net/40p0q5xx/
I am working on a slideshow combining css and javascript, but currently I have no idea how to realize the planed design as it need to be responsive for different screen-sizes.
Following I've added a jpg visualizing the planned Layout:
Visualization of Layout
My approaches so far have been flexbox and float, but flexbox doesn't allow a 2 column 1 box : 2 box approach and float doesn't help with the adaption for different screen-sizes (wrap).
Does anyone have an idea for an approach? I realy want to avoid using different css for the 3 szenarios described in the picture above
I was wondering is there anyway to get a exclusive tablet view in foundation with its grid. I want an specific grid layout for desktop [achieved], one for tablet [not achieved] and one for mobile which is done perfectly. but after it's major breakpoint at 768px there's no difference between mobile view and tablet view regarding the columns lining upon each other. If you get what I'm saying some of columns get too big in tablet view which isn't absolutely necessary. There's no necessity to show them with 12-column mobile grid.
Second issue, I downloaded the RTL version of Zurb Foundation (the problem stays when using the original copy), the "row" element which has a role similar to "container" or "wrapper" or something like that, is started from the right side (left side in original version) and it's not absolutely centered. The problem becomes more critical when we enter mobile view and using block grid. Elements are not centered.
I really appreciate your answers guys :)
To answer your first question you can only get the tablet only grid if you are using SASS or SCSS.
*This experimental feature is currently only available by using SASS and importing the _grid-5.scss file into your Compass project. You can also simply download the grid-5.css file, and link to it in your HTML head after your foundation.css.
Medium Grid
As for the RTL can you post a example showing how it looks in RTL and LTR so I can get a better idea of what you are seeing. Also its easier to have one question per post.
sorry for asking as I hate asking questions but sometimes its the last resort.
I am pulling my hair out over here and I have read hundreds of pages over the weekend and just can't get my head around how to do achieve this.
I want to have a simple 4 column 'home' landing page for desktop and ipad (sub pages will revert to 2 columns - content and sidebar). When the user goes on to a iPhone I want the user to see 2 columns.
I have managed to either get the iphone to display a scaled down version of the 4 columns using the grid system or I have managed to get it displaying 1 column, neither of which help me.
I have attached an image of what I am trying to achieve if it helps but I would really appreciate if someone who has had some experience in this field to point me in the right direction as I just cant figure it out.
I am developing using wordpress and have tried bootstrap, responsive theme and bones and getting the same results with each. Each using a responsive fluid grid. I may be barking up the wrong tree but if someone could point me in the right direction I would appreciate it.
You need to use CSS media queries, based on screen size / device width.
This will allow your CSS to style the widths of columns on each device...
http://www.htmlgoodies.com/beyond/css/introduction-to-css-media-queries.html
Current versions of Adobe Dreamweaver now also support what are called "Fluid Grid Layouts" which are worth a look for this kind of issue. They are also very helpful for quickly solving inter-device layout issues. You can design easily for Mobile, Tablet, and Desktop in one interface!