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 :-)
Related
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
I'm trying to build an app that looks great on all devices but I'm having an issue with the responsiveness, actually I have a dought for what should I do. so here is what I'm thinking about:
1- If I build the app using the device toolbar which means I start with a media querie of 320px up to 1440px
like this :
and that's what I did actually and everything is going Ok at least that's what I thought but when I use the viewport width ( increasing, decreasing it) I see some unexpected results
this is on 605px viewport width:
I built this app with absolute positioning and I applied a position relative to the img in the background, maybe this is bad practice I know , please note that the app looks great on all devices that the device toolbar offers me.
some of my friends adviced me to use a framework and get rid of all these headaches but really I wanna practice vanilla CSS very well please consider that this is my first app and I'm doing my best to make it look great on all devices
so my question is:
should I leave it like this because logically If it looks ok on the
devices like Iphone 6 ... (the devices that the device toolbar
offers me) I don't need to address the viewport width issue.
or should I use a framework and I don't like this solution I know
it's feasible and as I told you I wanna practice vanilla css.
or should I use another technologie like flexbox or grid system and
this is the hardest solution I think because I'm gonna rebuild the
entire app, but it's ok.
and the last thing I wanna ask about is: is there anythings should I be aware of in my future projects especially if I'm working with vanilla CSS
Congrats on building your first app!
1) When posting questions on Stackoverflow, it is always helpful to provide either an example of your code directly in your post, and/or to include a link to a running version of your code on a site like jsfiddle.net, JSbin.com, codepen.io, etc.
2) For most responsive apps, there are almost always a couple of widths where things do not look exactly perfect. These points are usually right before/after a breakpoint transition.
3) In general, you don't want to use position relative or absolute for handling page layout. There are a number of situations where they can be helpful, but I think its safe to say that they should never be the first thing you reach for when trying to create the layout of a page.
4) Right now, the best way to handle page layout with regular CSS -- no library -- is probably Flexbox because of its versatility and adoption of all major browsers. I highly recommend you learn it and become familiar with it.
5) There is nothing wrong with using a library for general page structure stuff. Because of its use with a ton of companies, I highly recommend you become familiar with Bootstrap -- specifically its grid framework. If you do go this route, read the rules for certain things very carefully. For example, I cannot tell you how many people have their apps look screwed up because they don't follow the cardinal rule of Bootstrap's grid system: The only children of a row should be col. Say that 10 times.
Best of luck to you!
If you look at the attached screenshot you will see a design I have created for HTML email.
Screen Shot
In all of the tests I run, the following are on one row next to each other.
The logo, "VIP Edition" and the View all Deals button.
In Safari the VIP Edition and the View all Deals fall down a row and the logo centers. Can anyone explain this behaviour to me? I'm struggling to understand why it doesn't happen for the rest of the email, and I can't think how to phrase this question to find my answer.
It would be great to see your code, even if just for that section.
But I have seen this before and I know that when I see this it's usually when I have two aligned tables with an align=center on the parent td.
So for example in your instance, the VIP Edition logo would be in a left aligned table and the View all deals button would be in a right aligned table.
Make sure the td housing both of those aligned tables does not have an align attribute set.
Taking that off always fixes the issue for me.
If you need to center elements for mobile, set the align=center further up
I ended up starting again, I can only assume that it was something to do with the widths of the columns. I found this post which was useful.
In the frameworks section I decided to try a few. The first I tried was Zurb Foundations Ink, because I have used Zurb Foundation in the past. However, their supported clients wasn't comprehensive enough for my liking. They make no mention of the differing browsers, and in my opinion that matters. I've done a lot of testing in the last month. I will test it more thoroughly when I get time, at least they offer a version that works responsively in Gmail which doesn't use media queries.
Wanting something that worked on all platforms out of the box I tried Email on Acid's responsive template. It looks great, and I use Email on Acid to test, so I thought they would have it solved. Their website is full of useful tit-bits. However, their template didn't work in Safari and had the drop down issue I had initially started with. They don't claim it works there, but being as they offer a testing service, I had hoped it would work on all the platforms they use.
Then I moved onto AntWorts solution. That worked in my initial tests, and I found it remarkably easy to adapt to my needs, eventually adding additional columns using their methodology which was clearly explained in one of the templates.
My final template has 1,2,3,4 column grids which work responsively part fluid part adaptive. My advise to people in the future is to start with this boilerplate, I redid my whole template from scratch and it took half the time I have spent trying to troubleshoot a different boilerplate to start with.
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 recently just added a grid layout, but I can't figure out how to make my links work. The grid that I used is the 1140 one at http://cssgrid.net/. I studied the source code of that website, and tried to make my page like theirs, but when I put everything in it made mine worse, and the grid didn't even work. This is how my website is supposed to look http://spencedesign.netau.net/singaporehome.html
and this is how it does
http://spencedesign.netau.net/home.html
And when you reduce the size, it doesn't look like it's supposed to. When you minimize it I want the pictures(links) to be two per row, then one per row depending on how small the page is. I also want the quote to turn into different rows when it is too small for it. But I can't figure out how to make the page look normal regularly let alone make it look good with a smaller browser. Thanks!
http://goldengridsystem.com/ might have what you're looking for. Folding effect worked for me.