Hi I have recently rebuilt this website to make it responsive and I am having a problem when it get’s down to iphone size (in fact I have had a similar problem on other sites). So the on the top of the page I have from left to right the logo (clear left) - the phone number (clear right) and under the phone number the sm icons. all good!
when we shrink down to a vertical column the order goes to top: phone number, next: social media, next :logo, next :Menu
I would like the order to be Top: logo next phone number, next s/media in one row, next menu
Is this possible and can anyone point me in the right direction - so the brunt of my problem is how do I control the order/relationship when the responsiveness kicks in.
Thanks Anthony
freewaytalk mailing list
email@hidden
Update your subscriptions at:
Hi Anthony,
I can see from the order of the source code that the items are ordered as;
Phone number and social media (these are contained in a single element called “m1”)
Logo
Because the logo and phone number are floated to the right they display OK on the desktop view but obviously show before the logo on smaller screen sizes.
You need to bring the logo into the layout before the phone number and social media items.
My recommendation would be to;
Float the logo left
Float the “m1” grouped item to the right
At smaller screen sizes you can then adjust the alignment, margin and padding of the items to display the items nicely so they appear in a stacked fashion.
Regards,
Tim.
On 18 May 2017, at 10:52, agallagher <email@hidden mailto:email@hidden> wrote:
Hi I have recently rebuilt this website to make it responsive and I am having a problem when it get’s down to iphone size (in fact I have had a similar problem on other sites). So the on the top of the page I have from left to right the logo (clear left) - the phone number (clear right) and under the phone number the sm icons. all good!
when we shrink down to a vertical column the order goes to top: phone number, next: social media, next :logo, next :Menu
I would like the order to be Top: logo next phone number, next s/media in one row, next menu
Is this possible and can anyone point me in the right direction - so the brunt of my problem is how do I control the order/relationship when the responsiveness kicks in.
Hi Tim Thank you very much for the help. I have given floated log left and m1 right. I then gave Logo a -500 top margin which did what I wanted but off the page. I’m haveing a bit of a brain fade on this one. Have I done my initial layout in the wrong order or just wrong
freewaytalk mailing list
email@hidden
Update your subscriptions at:
It is always going to be tricky to explain these things without seeing your Freeway file but here is essentially how I would do it;
Your outer container is called ‘TopWrapper1’. Double-click on this item so you can add an inline child element to it
Select Insert > HTML Item or cut and paste the logo into this box
Set the logo to float left
Select the ‘m1’ group and cut this from the page
Select the logo item you inserted in step 2 and press the right arrow on your keyboard. This will insert the cursor to the right of the logo.
Paste the item into the ‘TopWrapper1’ item and set the float to right.
You should now have a logo on the left and a phone number/social media group to the right with them both aligned to the top of the parent box.
As you preview the page in your browser use the Responsive Design Mode in Safari or Chrome to view the page at different screen widths. There will be a point where the available screen width gets too narrow and the two items will run into each other. Make a note of this screen width and create a breakpoint at this width in Freeway. You can then style the logo and phone number/social media group to display one on top of the other rather than side by side by unselecting the floats on the items.
I hope this helps.
Regards,
Tim.
On 18 May 2017, at 16:57, agallagher <email@hidden mailto:email@hidden> wrote:
Hi Tim Thank you very much for the help. I have given floated log left and m1 right. I then gave Logo a -500 top margin which did what I wanted but off the page. I’m haveing a bit of a brain fade on this one. Have I done my initial layout in the wrong order or just wrong
Thank you so much. I think I’ve kind of fixed it. I used your logic and rebuilt. I deleted the content of topwrapper then added two new html items 1 for the logo set to float left and set the second to float right, then in the different breakpoints I changed the logo to 100% and likewise the second html item. It works! thank you. learnt a lot today about order etc. really need to think ahead with the responsive box in box model compare to the old put it where you want it to be style I’m very used of.
Thanks again, I still need to tweek the margins/padding to make it look right, cheers.
Anthony
freewaytalk mailing list
email@hidden
Update your subscriptions at:
