[Pro] Backdraft site - changing padding gives a problem

Backdraft site - changing padding gives a problem

I am building a site in Backdraft and I am seeking a solution to this problem.

When I increase the padding in a module’s box and look at it on an iPhone it places all the text in the left panel hard over to the right and the text in the right panel hard over to the left. (It looks fine on my desk top at regular width)

On this page, below the large photo, is an untouched BD framework of two panels. Each panel has a 14px padding.
Next is the same framework with the images removed and text replaced and styled.
No problem so far. All works well on iOS

Below that is the same framework (with a paler grey background) but with a 30px padding. That is were the problem appears

What do I need to do to increase padding without upsetting the position of text on an iOS device.?

And whilst I am here - can anyone explain why, in the site pane, the right box can suddenly, and far too often, appear above the left box, (although it still stays on the right in the design view but when viewed on iOS goes above the left box, not below it) The fix, explained by Caleb, is to copy/delete and then paste it back in place to the right. (This is not a Backdraft issue it is a FW thing as outside of BD I also have similar problems of boxes in in-line construction leaping out of place at the merest visit of my mouse)
But is there a way to stop this happening in the first place?

Regards Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Soory Forgot the link

http://www.richard-lowther.com/lamps/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Issues I am seeing are due to the defined sizes of the Divs eg:

@media screen and (max-width: 320px)
#twoRight {
width: 110.00000000000001%;
}

As you can see widths - for a lot of the elements - are in excess of 100%.

What is it telling you in FW?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

With 14px padding the wrapper is 100% and the boxes are 46.83%.

With 30px padding the wrapper remains 100% but the boxes change to 44,1%

Box Sizing action is present which has “convert width to percentages” But this is standard across all Backdraft sites

R


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

What you perhaps need to inspect is the width of twoLeft and twoRight in the 320 Media Tab.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Thomas

In fact I had to go to each Media Tab and re-enter the widths as they all had grown. Then it worked as can be seen on PAGE TWO Backdraft Starting Page Two.

PAGE ONE remains as the problem page as I would be interested in Caleb’s comments.

But why would asking for more padding in the Default Tab make all the boxes increase in size across all the other Media Tabs ? I just wanted more space around the text within a given box. Is there a better way ? The reason I bought Back Draft, apart from building sites, was to get an insight in how these things worked. If I build in FW without a template how do I calculate in advance the box sizes and their padding ?

Regards Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

If I build in FW without a template how do I calculate in advance the box sizes and their padding ?

If you use the Box Sizing action then you dont have to worry about the padding as the action takes it into account http://actionsforge.com/actions/box-sizing-fw7 and then it is simple maths.

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Yet the Backdraft templates all have Box Sizing as standard but changing padding brings mischief.

Back draft is not my only source of learning - I have bought a pack of Softpress templates to dissect (and employ, hoping to recover the cost !) Currently making use of the Estate template as in this test.
http://www.richard-lowther.com/absinthe

This template, and others do not make use of Box Sizing (why not?) Note the the two boxes below the main image - not so different to the ones in the Mozaic Lamps site above. I changed the padding in these from the given - with no apparent problem. Of interest though is this template pads in percentages not pixels. Maybe I should try that in Backdraft.

Richard


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I can confirm your problems Richard. I have had to re-adjust the percentage widths of boxes for each break point in order to get them to work.

The quickest way to do this is to select the item from the left hand list of items on a page, under the ‘Site’ column, revealed by clicking on the triangle for that page. You can then enter a percentage figure for the box width. Where the box needs to stretch right across the width, put in 100%, and it will tell you that this is out of range and has been constrained.

Where you still have boxes that must remain side by side, I position guides where the boxes would butt up, and resize one so it fits. This gives me an approximate percentage. Apply this to the other boxes and see if everything fits. If not, then make slight equal adjustments until they do.

Yes, it’s a bit of a pain but it works.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options