So this is my first time trying to use a responsive framework...also fairly new to building responsive sites in general - but had a lot more luck with just building them from scratch and sizing each element...though Foundation seems like a much better solution if I could just get my head around it!
Work in progress is here: http://client.analog.la/360/
It's behaving 'alright' in my desktop browsers (resizing down to 400) except for a problem with the menu - the issue I'm having is trying to get the menu to drop down below the logo and be properly centered.
On actual mobile and tablet having way more issues...the menu is sitting above and the whole layout or to one side and not dropping down at all. On ipad the whole layout seems to be only about 95% page width with a random margin down the right hand side...on iPhone the whole layout only seems to be about 50% width...which just looks...awful. There's so much discrepancy between how the layout looks on devices vs. how it looks on desktop at the same resolution that I'm a bit baffled...Also, really not sure where I went wrong with the sizing to make it look so wrong on devices!
Any help would be massively appreciated!
Thanks,
Not sure if you're still looking for help on this, but there are a number of issues in your codebase, and it's hard to say which ones are causing the behavior you're trying to address. Your very first div uses the columns class, but it's not nested in a row. Elsewhere, you have rows immediately nested in other rows with no apparent benefit, more columns nested in other columns without an interposing row, and nested rows that aren't set to collapse. You're also using spacer.png in a few places, which almost reduced me to tears.
And your top level headers are in spans instead of h1. My only guess here is that you were attempting to sidestep Foundation's default styles? Use a class. You need those h1s for SEO, semantics, etc.
No insult intended, but you might do well to check out Treehouse and sharpen your coding skills - could save you a lot of time and frustration in future work.
Related
I am trying to make a good website and I have a big problem: overlapping.
When I make the window smaller, all of my elements are spread.
On mobile is worse. What can I do?
https://bucovina-tour.000webhostapp.com
I took a look at your .css definitions, and it looks like the way you're positioning your html elements isn't ideal when trying to build a responsive/adaptative website.
When you define margin-top: 500px for your .button_center class, for example, please note that those margins will start stacking on top of each other at some point.
With standard resolution (1366x768, for example) there's enough space for all of your buttons to be inline with each other, so their margins will overlap and work as if they were one. When shrinking screen resolution, though, there won't be space for all of your buttons to stay in the same line, so they will start stacking on top of each other. But since, by css definition, there should be a margin of 500px on top of each button, they'll begin to spread vertically on the screen.
That's one of the reasons your website is overlapping, but there are a lot more. I highly recommend taking a look at Responsive Webdesign Principles and playing with responsivity on smaller scale before editing a template. When you stack multiple inexpected behaviors on CSS, it becomes exponentially difficult to understand why each element broke.
Also, explore the inspect tool that most browsers have. With this tool you might be able to visualize margins, borders, widths and various other characteristics of your html components simply by hovering over them! It's really useful for web debugging.
some of your code is very hard-coded. try to think about mobile sizes (and check it by console) before you give size to elements
Like said above, for every step, use a #media query
I strongly recommend learning how to work with flex in your CSS. It might seem a bit complicated at first, but it's really not. It does most of the responsive work for you. This is the real beauty of it!
Good luck :)
I realize there’s no one answer to this question, and as always, ‘it depends’. All discussion is welcome, and professional, experience-based input it appreciated!
At what point do you break a component into two components — one for mobile ish sizes, and one for desktop ish sizes, VS having a lot of complex CSS and ‘conditional’ HTML in one component?
I was just making a navbar for a website (exciting!) and the desktop navbar is extremely simple. It can be a dumb functional component. The mobile navbar adds some HTML and child components, resizes, reformats, needs an open/closed state, etc.
For the sake of debugging and maintainability, it seems like mobile is adding too much complexity to the desktop version, and the desktop version doesn’t seem to make sense among the mobile code. It’s just a lot of CSS and HTML in the same file that becomes a little less straightforward with two very different behaviors distracting each other.
But for the sake of performance, components mounting, etc. it would be a sacrifice to break this up into a container header with the two children and add additional work for React.
I'm curious, in your experience, have you encountered this problem before? How have you decided to solve it? Why? At what point do you break it up? Do you prefer the clarity of granular components, or the clarity of having all the CSS and HTML in one spot? Thanks!
Well since you are using React you can easily check if it's mobile or larger then mobile and include either one you require and if you need to have multiple navigations it's better to mount just the one you need.
But again I wonder how come you are adding that many things/items to your navigation on mobile but on desktop you are keeping it so simple?
Isn't the point of navigation that you have everything accessible with one or two clicks?
If such a complex navigation is required on mobile it only makes sense that a bit more complex navigation could be required on desktop as well :)
Don't get me wrong I have been in the same place as you are right now but it all comes back to what do you want your customers to click on?
If the conversion happens on few links only there's no need for a huge complex mobile navigation, just make sure user can access everything they might require.
After all you can easily create a search form that would be able to help you with reducing data required in the navigation on mobile.
Not saying that I love huge navigations on desktop but if it's necessary on mobile I have a feeling it might be on desktop as well.
I am having some trouble on this and can not figure it out on my own. I am not any kind of coder just dabbled in it a few times starting in 1998. I am trying to design a website for a friend of mine using bootstrap 3.3.4 for the first time. After getting it online I realized it is way to wide on Iphones. It shows about 50% padding on the right side. You have to zoom in to use view the website correctly. Can anybody give me any input on what can be causing this? I cant find a cause anywhere. On the desktop version it works perfectly even when I resize the window. It is a little to wide on android also but is not near as noticeable as it is on IOS. The website is up at
This link
Thank you for any help
It's difficult to tell exactly what is wrong as I don't have an iPhone. But some observations:
You are loading Boostrap javasript in the head, then loading jQuery and Bootstrap js again at the bottom. Remove the one from headas it's giving a console error.
In the footer, your row has as it's child element a class of col-me-6 which I suspect is a typo. Also it has an inline style of width: 100% which is not advisable - use the grid system to control widths.
Finally, and most likely your problem, in the #portfolio container, your first row has some invalid contents. Only a col-* can be a child of a row. You also have a nested row which is screwing up the margins and giving you the extra wide window.
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.
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.