I need a help with something I’ve been struggling for the last couple of days.
The header of this page has 3 elements, that I’d like to be equally distributed, but here’s the problem: There’s a logo on the left and another one on the right with a slogan between them, centered. I tried many different combinations, I could imagine, but there’s no much instructions about this.
I aligned the logo on the left as “float left” and the other logo on the right as “float right” with the slogan on the center as “centered”, and in a desktop browser the slogan looked perfectly centered, but in a tablet (portrait position) or phone the logo on the right overlaps the slogan, so the only solution I found was making the slogan floats to right or left and it adjusts, when looking in tablet or phone and doesn’t overlaps anymore, but it doesn’t look centered on a desktop computer.
I want them well centered and if possible all three elements stack up in three rows in a tablet (vertical potion) or phone.
My knowledge of the responsive construction is really poor.
How can I make it happen?
Any suggestions?
Thanks in advance,
Marcus
ps: I could send the actual Freeway file, if needed, but have no idea how to do it here
Hi Marcus,
Layouts like this can be tough but you are almost there with your header. The trick is to make sure that all of your measurements in the header are based on percentages rather than pixels. You can then divide the width of the header up into logical percentages so they all make the full 100% width.
I tend to use the web inspector in Safari for these sorts of things as it is very easy to tinker with the layout in the browser without writing too much code. Start by giving each of the three elements an outline of 1 pixel so we can see them in the browser. Outlines are better than borders as they won’t adjust the overall size of the item.
The ‘header’ item is 100% width of the page. The ‘headerwrap’ item inside of this is only 96% and has a fixed padding of 24 pixels. Start by changing the padding on this to 2%. If we take the 96% width and remove the 2% padding on each of the left and right hand sides we get an overall width of 92% (96 - 2 - 2 = 92). All of the widths of the children in this box need to add up to 92%. With that fixed in our thoughts we need to set the widths of the items in the header. I set the ’sunshine’ logo to 25% and the padding to 1%, the ’twoyears’ to 15% and the padding again to 1%, and the ‘slogan’ item to the remaining 54%. If I’ve got my sums correct that should make them all add up to our 92%.
Now when you adjust the width of the browser window these items should all resize based on their percentages. The items inside of them (the images and font sizes) are still set as fixed sized items and you have some styles set at different breakpoints that adjust the layout slightly but you should see how the header layout will flex from the very largest to the very smallest browser width and keep the items all in proportion and all in a single line.
There will come a point when you are flexing the width of this page that you’ll want to re-layout the items in the header. Make a note of the browser width (again the Responsive Design Mode in Safari is great for this) and create a breakpoint in Freeway. From here you can adjust your header items so they are either resized or stacked and adjust the layout until you are happy with it.
Moving forward you may want to change the images in the header so they are resized along with the header as the browser width changes or you may decide that they always need to be a fixed size. That is a design (and usability) decision but making the images flexible is just a case of adding a few extra CSS styles to them. You can see that in this screen shot I’ve adjusted the logo on the left to be responsive (it stays within the bounds of the red box) but the seal on the right is still a fixed size and is starting to push out of the parent box; 404 File Not Found - Jumpsharehttp://jmp.sh/f4KZbkI
Both are valid ways of working depending on what you want achieve.
All of the responsive layouts I do in Freeway are based on this simple principle and it generally makes for a very easy and productive workflow. It means that you only really need to define break points for your page when the content actually breaks the layout. Rather than designing for the screen size of a certain device (of which there are thousands) your layout will be full flexible and look great at all screen widths regardless of the device used. It does require a little bit of thought to get the layout you need but the final result is well worth the extra mental effort.
Good luck with the adjustments and let me know how you get on.
Regards,
Tim.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi Tim,
sorry for not answering this thread earlier.
I tried to use Safari web inspector for this, and followed all the instructions you gave me, but didn’t get the results I wanted. I must be doing something wrong or missing a step. I also tried it using TextWrangler, following the same instructions, but my knowledge is limited, so I went to Freeway and kind of fixed it a little bit, with successive try and error experiment, but still its not good…
When I go to Safari web inspector and choose “Enter responsive design mode” it looks good on almost every media, except on iPhone 6 and iPhone SE.
How could I adjust just these two media types only, using Freeway, without changing the others?
I understand that the size of the logos are too big for the iPhone 6 and iPhone SE, so I want it to reduce the logos proportionaly on these medias, without changing the others. I tried many different combinations in Freeway, with no success.
Marcus – please tell me that you scrubbed the (S)FTP credentials from this file! Otherwise, change your passwords on the server where you were uploading this document.
Walter
On Aug 8, 2017, at 11:02 AM, Marcus Do Carmo email@hidden wrote:
I can see that this file does not have any upload credentials saved in it, but did you change the credentials after you leaked them? The odds are small, but not zero, that someone could have downloaded the previous version and extracted them, and could run away with your server. This is a public mailing list, and there are thousands of members, but more importantly, anyone who can use Google can see everything ever published on the entire list.
Walter
On Aug 8, 2017, at 12:14 PM, Marcus Do Carmo email@hidden wrote:
Hi Walter, I just changed my credentials on Google. When I posted the link I thought it would be just for the file I sent. I have no idea how to scrub the (S)FTP credentials on Google drive. Should I block the file to be shared even though I already changed the Google password?
On 8 Aug 2017, 5:27 pm, waltd wrote:
I can see that this file does not have any upload credentials saved in it, but did you change the credentials after you leaked them? The odds are small, but not zero, that someone could have downloaded the previous version and extracted them, and could run away with your server. This is a public mailing list, and there are thousands of members, but more importantly, anyone who can use Google can see everything ever published on the entire list.
Yes. You shared the file publicly, and the credentials I was concerned about were the ones cached in that file, not the ones at Google itself. The ones I am certain you should change are the credentials you use to log into your Web hosting provider when you upload from within this document.
Walter
On Aug 8, 2017, at 1:50 PM, Marcus Do Carmo email@hidden wrote:
Hi Walter, I just changed my credentials on Google. When I posted the link I thought it would be just for the file I sent. I have no idea how to scrub the (S)FTP credentials on Google drive. Should I block the file to be shared even though I already changed the Google password?
On 8 Aug 2017, 5:27 pm, waltd wrote:
I can see that this file does not have any upload credentials saved in it, but did you change the credentials after you leaked them? The odds are small, but not zero, that someone could have downloaded the previous version and extracted them, and could run away with your server. This is a public mailing list, and there are thousands of members, but more importantly, anyone who can use Google can see everything ever published on the entire list.
HI again, Walter. Now I understood what you meant. No, the Freeway file didn’t have any FTP credentials. I usually prefer to upload the Freeway files using Fetch, not directly through Freeway.
On 8 Aug 2017, 5:27 pm, waltd wrote:
I can see that this file does not have any upload credentials saved in it, but did you change the credentials after you leaked them? The odds are small, but not zero, that someone could have downloaded the previous version and extracted them, and could run away with your server. This is a public mailing list, and there are thousands of members, but more importantly, anyone who can use Google can see everything ever published on the entire list.
On Aug 8, 2017, at 1:55 PM, Marcus Do Carmo email@hidden wrote:
HI again, Walter. Now I understood what you meant. No, the Freeway file didn’t have any FTP credentials. I usually prefer to upload the Freeway files using Fetch, not directly through Freeway.
Well then I am sorry to have put you through this – it wasn’t needed.
Walter
On 8 Aug 2017, 5:27 pm, waltd wrote:
I can see that this file does not have any upload credentials saved in it, but did you change the credentials after you leaked them? The odds are small, but not zero, that someone could have downloaded the previous version and extracted them, and could run away with your server. This is a public mailing list, and there are thousands of members, but more importantly, anyone who can use Google can see everything ever published on the entire list.
Also: early versions of Freeway did save passwords in the document, but we changed this in Freeway 6 onwards so that they are saved (more securely) in the keychain.
Jeremy
–
On 8 Aug 2017, at 19:00, Walter Lee Davis email@hidden wrote:
On Aug 8, 2017, at 1:55 PM, Marcus Do Carmo email@hidden wrote:
HI again, Walter. Now I understood what you meant. No, the Freeway file didn’t have any FTP credentials. I usually prefer to upload the Freeway files using Fetch, not directly through Freeway.
Well then I am sorry to have put you through this – it wasn’t needed.
Walter
On 8 Aug 2017, 5:27 pm, waltd wrote:
I can see that this file does not have any upload credentials saved in it, but did you change the credentials after you leaked them? The odds are small, but not zero, that someone could have downloaded the previous version and extracted them, and could run away with your server. This is a public mailing list, and there are thousands of members, but more importantly, anyone who can use Google can see everything ever published on the entire list.
Hi Walter,
no need to be sorry for anything at all!
I really appreciate that you advised me, because I didn’t think about it when I sent the link, and if the credentials were there I wouldn’t have thought about it. Next time I’ll be a lot more alert
thanks again,
Marcus
ps: Do you have any idea how do I solve this problem on my file?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Also: early versions of Freeway did save passwords in the document, but we changed this in Freeway 6 onwards so that they are saved (more securely) in the keychain.
Hi Tim,
sorry for not answering this thread earlier.
I tried to use Safari web inspector for this, and followed all the instructions you gave me, but didn’t get the results I wanted. I must be doing something wrong or missing a step. I also tried it using TextWrangler, following the same instructions, but my knowledge is limited, so I went to Freeway and kind of fixed it a little bit, with successive try and error experiment, but still its not good…
When I go to Safari web inspector and choose “Enter responsive design mode” it looks good on almost every media, except on iPhone 6 and iPhone SE.
How could I adjust just these two media types only, using Freeway, without changing the others?
I understand that the size of the logos are too big for the iPhone 6 and iPhone SE, so I want it to reduce the logos proportionaly on these medias, without changing the others. I tried many different combinations in Freeway, with no success.