I have an assignment to display products in specific way that needs to be responsive as well,
this is what I need to achieve:
In your opinion and experience, in order to achieve that what method will you use?
Bunch of divs? table? ul/li?
I need little bit of direction before I'll start encoding the image. and I'm looking
for the most efficient way for the responsive design.
The most efficient way can only be done using bootstrap. A starter guide is found on the following site
http://getbootstrap.com/css/#tables
Just load the libraries in you project at the appropriate places and apply the classes to your tags to get the most responsive design you want.
Related
I'm looking for some advice on how to approach creating a grid like the picture included. The images are going to be of different sizes.
It will be included in a wordpress theme that when images are uploaded to the specific post type they will display where the pictures are shown.
I was leaning towards a list with different styles for &:nth-of-type() styles.
TIA for any advice, all is appreciated.
I would try using something like Masonry (https://masonry.desandro.com/). Great library, very versatile. There are also frameworks that support grids on demand and nested grids, like SusyGrid (https://www.oddbird.net/susy/). I have used this successfully in the past for asymetrical and nested grid layouts.
I am new at html and css and when I increase my browser size my entire layout gets messed up and elements start overlapping one another. Can anyone show me a way to make my layout become responsive? Thank you in advance!
It depends on what you wanna do.
1) If you're learning HTML5 and CSS than you've got to watch towards bootstrap media queries to code fully responsive. To go further you will also need Javascript. There are also paying technologies.
2) If you just wanna make a responsive website without caring about the coding side, you should choose a CMS like Wordpress, Joomla etc... It will be faster for you and with a good responsive template, a very decent solution.
There is a nice tutorial in w3schools that uses we3.css stylesheet framework, very easy to start and see the entire problem. It uses images of different size and adpat itself to pc, tablets, smarthpones. Try it, I mean read, it is a short one, and will help you a lot, can you implement without adding that file, but changing easily yours.
Hi Im currently creating a Website (who isn't?). My Website Design Looks like this:
Desktop Version:
Mobile Version:
(Sorry for the Big Images)
As you can see, ist not much changing.
Sidebar and the Global Nav are disabled in the Mobile Version (Menü via o/Off Canvas)
The main Content Layout Changes.
The Layout in the Content divs Changes too. (Use nested Colums fot that in the Grid System?)
My Question is: Should I use a Grid System? If Yes: Should I just use it for the Orange Content Area or for the hole Website?
Added: The Site should is Full with!
As mmgross said, you're asking a pretty broad question that comes down to taste and experience in design.
There are a number of tools and frameworks that give you access to an already defined grid system; Bootstrap is probably the best known but Foundation CSS is becoming very popular and is lighter weight. If you're not planning to do much intricate styling and just want a preexisting grid, my personal choice is Skeleton - it's very lightweight but adds the grid/responsiveness you're [probably] looking for.
This brings up the other main point: how experienced are you using HTML/CSS? One of the big benefits of using a grid is the responsiveness that comes from them without writing a number of media queries. Still, you'll have to at least write one media query to detect if mobile, so if you're comfortable with position in CSS then it might be best just to pass over grids and write it all yourself (looking at your layout, that's what I'd probably do).
It's always a trade off between time it takes to do the task and time it takes to learn something new, so keep in mind that the learning curve for some of the frameworks might be steeper than you think. Then again, if you're experienced with using them, it will probably be easier to stick with what you know than play around with the raw CSS.
Hope that helped!
Complex Grid Layout, Help!
I'm making a responsive website using bootstrap 3.0.2 and can't figure out the layout that is stated in the requirements document for the project. I made an image of what I need, and will give more detail, or update my question, if needed. I am open to any suggestion on how to accomplish this.
The Issue
This image describes what I need the design to look like at three different widths.
I should add, each box will be basically a div with an image, article title and summary within it.
Like to say ... in advanced
Id like to say thanks and apologize in advanced if the question is dumb or the answer is obvious. I have been a dev for a long time, but I'm new to responsive design and I've been banging my head on the wall trying to get this to work
The problematic part of your project is to make two smaller blocks side with a bigger one and make these two 50%. As far as I know, there are no mature cross-browser solutions that would accomplish that without javascript.
You may want to take a look at: Flexbox and for Comrade IE Flexie.
Another approach to accomplish the same could be using viewport dimensions. Just be aware of the browsers support.
All in all, if you can do that, I would suggest just using JS, with a fallback to css that will not break the site's look too much. Having just finished a project with similar requirements, I would just like to say good luck.
I just tested few of my webpages in cross browsers testing tool and found out that for lower resolutions all my divs were not coming separately.
Afters googling I found out about responsive griding.
After reading that I wanted to ask that whether responsive griding is nothing but making your web page responsive to different changes in screen sizes or does it have anything more to it
Also I am using purecss to make my web page responsive so I needed to know whether this is the right way or and what other ways are there to do this.
Pretty much, it's also about curtailing content based on your audience. Say that people on mobile don't need to read all the reviews on the page you would hide it or show it in a different way. Whether or not to use pure is completely your personal preference. There are a gargantuan amount of responsive frameworks, you should look at what they offer to your own goals of customization or extensibility. Foundation for example offers lovely JavaScript addons you can use for modals, sliders and navigation.
Good luck and please add to your question if you need to ask more!
Your choice to use pure I feel is a good one because its extremely light weight and style agnostic. While bootstrap and foundation are more popular choices they can be up to 10 to 20 times larger.
Check out TukTuk as well, its similar in nature to Pure:
http://tuktuk.tapquo.com/
Yes, you've got the right idea. You can use frameworks like Twitter Bootstrap, or Zurb Foundation, which have all the CSS you need for responsive grids. The basic idea is using CSS media queries to apply different CSS rules for different screen sizes. Javascript can also be used to show/hide features which might work better on mobile.