Today I tried to build my first inline based on the example from The Big Erns.
I start to understand it (I think) but when I made a css menu in preview the text does not move how it should when you make the window smaller. Please look at my example to see what I mean.
What am I doing wrong?
Another thing which is happening: the text in the pagecontent does not behave as it should be; the text in the right column does not move under the left column, as in Ernies example file. So… Even trying to rebuild is more difficult than you think…
What will solve some of the text issue on narrowing browser width would be
to set the overflow setting on #PCContent from hidden to visible. Then set
the overflow on #PageNav to hidden and the menu will wrap more sensibly.
Best wishes…
–
Ernie Simpson
On Sat, Aug 3, 2013 at 3:48 PM, Wimdg email@hidden wrote:
Today I tried to build my first inline based on the example from The Big
Erns.
I start to understand it (I think) but when I made a css menu in preview
the text does not move how it should when you make the window smaller.
Please look at my example to see what I mean.
What am I doing wrong?
Another thing which is happening: the text in the pagecontent does not
behave as it should be; the text in the right column does not move under
the left column, as in Ernies example file. So… Even trying to rebuild is
more difficult than you think…
Thanks Ernie, that did it, as you can see in my example. But what about the right column in the content area. Why doesn’t it move under the left column when you narrow the browser?
Must say, love this inline work, nice to see some results!
That’s because they both have a percentage set for width, so even how small your window will be … the div’s will have a percentage of that. You’ll have to apply a minimum width or a breakdown (when viewport is smaller than …px, then this div should be …px/% wide).
Well… in Ernies inline example file these two div’s have a percentage set for width as well. Still these two will behave in a way that the right one moves under the left one. So, he must have done something special…
The best option here is to turn to [cue scary music]RESPONSIVE DESIGN!!! Mwhahahaha!
Place this code before the tag, and customize to your liking:
<style type="text/css>
/* Choose the screen width that should trigger the change: */
@media screen and (max-width:480px) {
/* Adjust the sidebar element: */
#Article1 {
/* Force it below preceding elements: */
clear:both;
/* Tell it to be full-width: */
width:100%;
}
/* Adjust the main element: */
#Article {
/* Tell it to be full-width: */
width:100%;
}
}
</style>
Caleb, I turned on the Jaws music hahaha. Like to do a full responsive site. It was my goal to do that after having build a good inline site. Must say that I discovered what went wrong with my page: the right div had too much text in it (black little cross in the right under corner) After deleting this text it now moves under the left div when resizing in the browser.
I am curious about your code: how much of this code do I need to appy to make it fully responsive? As you suggested, I started with the Codecademy, but any help is allways appreciated (maybe a little pushing in the right direction)
Thanks!
To make it fully responsive, you will need to use all the code I supplied (unless you want to remove the comments to slim it down). I’m glad to see that you are taking the initiative to learn this stuff!
I’m glad to see that you are taking the initiative to learn this stuff!
Following on from a few threads of late I think one of the issues is that there’s not a comprehensive inline/responsive template (chassis) and tutorial for people to use/play with. Perhaps with a few variations. Yes, I know there are a few out there but it would be good if there was something more upfront from Softpress, included as a template perhaps. It would save people having to hunt through various threads and snippets of issues and resolutions. The time Thomas and Ernie (ao) have put in is fantastic with their examples and tutorials but I’m looking at those who are coming fresh to Freewaytalk…
For myself I’ve been using Danj’s inline (box model) chassis for ages with various slight modifications and really grateful for it.
Just thought I would throw that in. As Wimdg has demonstrated its very doable.
And definitely should have given Caleb a name check. sorry Caleb.
I’m not quite sure what you are apologizing for, but I forgive you!
Caleb, is this code really all that’s needed for this page to be responsive? Do I have to modify anything?
Well, this snippet won’t make to whole page responsive, but what it will do is make the sidebar fill in at 100% width below the main content area, which will also be changed to 100% width, when the viewport width is less than 480px wide. Add it just before the tag and see what happens!
On a somewhat related note, the reason why the sidebar is dropping beneath the main area right now is because of the weirdness of how browsers calculate box-sizing.
Let’s say that you have two inline boxes side by side in Freeway. You give them each 20px of padding and set them to 50% width. In Freeway it seems perfect, but when you preview it in Safari and begin to shrink the width of the browser, suddenly the boxes shove each other onto separate lines!
WHAT IS GOING ON HERE! You instantly sprout gray hairs and begin to contemplate living in the woods, away from anything resembling a computer, for the rest of your life.
Essentially, browsers calculate box-sizing differently then we think they would. The best way to illustrate this is with an image:
Notice how the declared width is the same for both boxes? Freeway does its best to insulate you from this, but this oddness does rear it’s ugly head when you are using % widths. The end result: a box that is 50% width in Freeway will actually be 50% + left and right padding, so two of them can’t reside on the same line. The solution? Use the Box-Sizing action.
IMHO, if you are building anything flexible-width, every element on the page should have this action applied to it. Alternately, I have found eastern Montana state to be about as computer-less as you can get.
That’s clear Caleb, like your humor!
The code placed in the page, but it is not quite happening yet. The css menu items have changed to bullet points. The rounded corners on my ‘aside’ div are gone too. Well you’re right: the grey hairs are coming…but I will never give up!
After a career of 20 years I am now unemployed but ready to follow my passion. So I want to start working with webdesign…
Caleb, changed it, css menu allright now, but wanted effect not visible. I renamed the div in the code, but I think that is correct. Could I be the case that I should place if before /head> tag instead of the tag?
Actually, it is working. Remember, the browser width will have to be less than 480px to see the change. If you want to adjust the breakpoint width value, just change the 480px in this line:
@media screen and (max-width:480px) {
Also, make sure that you apply the Box-Sizing action to the two affected elements, and set it to border-box and convert width to percentage. Otherwise, they break the layout by being 100% width + padding as I illustrated above.
Ai, but I tried it on an iPhone, so I should see it happening?
Concerning the Box-Sizing action: that’s something I will do too. But… your suggestion raises a question: these boxes are set to percentages in FW, or is that not the same definition of width?
