I'm trying to create a website as a portfolio for a graphic designer friend. I want to be able to import pictures of different sizes a bit like on this website https://victorthemes.com/themes/fraxos/home-version-two/
I tried replicating the design using bootstrap but the column system doesn't work in this case.
Upon further inspection, I realized that the position "top" and "left" move automatically depending on window size.
I was wondering if anyone could inform me on how to get to this result, plugin, template, JS or JQuery ... and if someone has an example I would be grateful to see it.
I'm looking for templates - including WordPress templates - but I can't really find what I want.
The website you are showing might as well be made with a grid plugin, like the one found here:
http://gridstackjs.com/
However, based on what you said about 'different photo sizes', you might be looking for what is called a masonry layout. Check the following plugin link that also includes examples:
https://masonry.desandro.com/
You could use UIkit for your framework -- it comes built in with a masonry style grid.
https://getuikit.com/docs/grid
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 have an upcoming test in which I will be given a one-page design that I will be asked to re-create in one hour using HTML and CSS. The use of Bootstrap is also encouraged, and "bonus points" will be given for making the page responsive.
I am a little confused by the last part of this question, because I have read that Bootstrap is responsive in and of itself. If this is true, would I get "bonus points" for simply utilizing Bootstrap, or is there more to it than this (i.e. I still create my own responsive nav menu within my self-created CSS file / there is some way to edit or personalize Bootstrap's inherited responsiveness)?
Thank you!
Check out the introduction docs for Bootstrap:
https://getbootstrap.com/docs/4.2/getting-started/introduction/
It might be a bit much but when you spend a night experimenting and reading, you'll be able to do great things with it
Yeah the navbar is responsive on its own but if you want to be sure to get bonus points, you might want to change the behaviour of certain columns based on the screen size.
You can find more about that here
I have created a Form in Kentico which I want to use on a full page for registration.
The issue I have is that the form is only displaying as one column, there is a lot of space remaining to the right of the form, so ideally I would like the form to sit over 2 columns. BUT, I need it to reformat itself for the screen size.
I have tried Custom and Auto Generated Layouts, but no joy with either, I have also tried adding a table with 2 columns to achieve what I want, this works fine on desktop, but when displaying on mobile, the user is presented with a horizontal scrollbar, so not a great experience.
Please can someone point me in the right direction with this one. Thanks.
What you are trying to achieve can be done with the proper use of CSS or, more often, with the use of some front-end framework to do the work for you.
For example, Bootstrap can do forms very easily - see for yourself.
There are many other frameworks you can use instead of Bootstrap such as Semantic-ui, Foundation or Material to name a few. Take a look here for more examples.
Now, for the integration with Kentico - you will need to use Custom layout and follow the HTML/syntax from the given framework & you will of course need to include the styles/js on your master page. Thats pretty much it :-)
i recently created my own website from the help of a free custom template (it's now 80% customized to my own preference), i am using blogger platform for my website.
I am planning to apply a Masonry/Grid layout to my website. I have googled for few days but to no avail.
this is the link i am following, it does work, however it is messed up, i think it could be something about the width or whatnot because it doesnt really appear to be inside my main page container. masonry blogger tutorial
here is my website link
I need guidance on every step i need to do in order to make this work for my website as i am not very advance in html, but i am a fast learner, i will be using the grid layout on a specific page on my website.
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.