[Pro] Issues with padding

DTP2 · August 9, 2015, 6:27pm

I’m going crazy!!

In my Freeway Doc I have a Master Page with an html item with Padding of 20px left and 20px right applied to it at breaking point 960px.

At breaking point 768 I have 10px left and 10px right applied to it and at breaking point 320 5px left and 5px right.

On one page this works perfectly and on other pages, the padding is not honored. I checked everything for different settings in FW and when I check the CSS in the browser, my padding is striked through and I don’t know why. It doesn’t work on my laptop and on my iPhone as well.

When I change my FW Doc to Inline Styles, it immediately works fine.

Please check http://www.haptonomia.nl, make your browser as small as possible and scroll to the grey “Lid van, Contact and Interessante Links” area. This has the correct padding applied to it.

When you visit http://www.haptonomia.nl/haptotherapie.php and do the same, you see the wrong padding applied to that area.

Can someone please help?

www.haptonomia.nl

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · August 9, 2015, 7:41pm

Not sure exactly what I should be seeing here - those 2 pages look the same to me.

You only seem to have 2 Breakpoints 600 and 900?

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:

DTP2 · August 9, 2015, 8:09pm

Hi Dave,

I have the default breaking point, 1 called 900 and on called 600. These are actually set at 768 and 320px.

I’m constantly trying to figure out what can be wrong. Now my home page is ok and Fysiotherapie and Haptotherapie are completely off even though they all share the same Master Page and Settings.

I completely re-applied the Master Content and Master Settings to every item on these pages to make sure they match.

Can you please be so kind and check again?

freewaytalk mailing list
email@hidden
Update your subscriptions at:

David_McCallum · August 9, 2015, 11:42pm

I have the default breaking point, 1 called 900 and on called 600. These are actually set at 768 and 320px.

That isn’t being reflected in the page code

Index Page:

@media screen and (max-width:900px)
{
	#PageDiv { width:auto }
	#module-logo { padding-left:10px; padding-right:10px }
	.fwNavContainer1 { display:none; position:fixed; width:100%; top:0; right:0; bottom:100%; left:0; margin-top:-100%; background-color:#E83647; -webkit-overflow-scrolling:touch; overflow:auto; float:none; -webkit-transition:.2s ease-out margin, .2s ease-out bottom; -moz-transition:.2s ease-out margin, .2s ease-out bottom; -ms-transition:.2s ease-out margin, .2s ease-out bottom; -o-transition:.2s ease-out margin, .2s ease-out bottom; transition:.2s ease-out margin, .2s ease-out bottom }
	#fwNav1 { width:100%; right:0; left:0; margin-top:0px }
	#fwNav1 .fwNavItem { box-sizing:border-box; float:none; overflow:hidden; width:100%; border-bottom:1px solid #FFFFFF; border-right:0; border-top:0; border-left:0 }
	#fwNav1 .fwNavItem a { padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px }
	#fwNav1 .fwFirstChild { border-top:0 }
	#fwNav1 .fwLastChild { border-bottom:0 }
	.fwNav1-toggle-label { display:block; position:relative; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none }
	.fwNav1-toggle-close { margin:20px auto 20px auto }
	.fwNavContainer1.fwMenuOn { margin-top:0; bottom:0 }
}
@media screen and (max-width:600px)
{
	#PageDiv { width:auto }
	#module-logo { padding-left:5px; padding-right:5px }
	#PageDiv #object-logo-1 { width:NaN% }
	#PageDiv #object-logo-2 { width:NaN% }
	#PageDiv #object-logo-3 { width:NaN% }
	#PageDiv #object-main { width:100% }
	#PageDiv #object-aside-aside { width:100% }
	#PageDiv #module-news-1 { width:100% }
	#PageDiv #module-news-2 { width:100% }
	#PageDiv #module-news-3 { width:100% }
}

Haptotherapie page:

@media screen and (max-width:900px)
{
	#PageDiv { width:auto }
	#module-logo { padding-left:10px; padding-right:10px }
	.fwNavContainer1 { display:none; position:fixed; width:100%; top:0; right:0; bottom:100%; left:0; margin-top:-100%; background-color:#E83647; -webkit-overflow-scrolling:touch; overflow:auto; float:none; -webkit-transition:.2s ease-out margin, .2s ease-out bottom; -moz-transition:.2s ease-out margin, .2s ease-out bottom; -ms-transition:.2s ease-out margin, .2s ease-out bottom; -o-transition:.2s ease-out margin, .2s ease-out bottom; transition:.2s ease-out margin, .2s ease-out bottom }
	#fwNav1 { width:100%; right:0; left:0; margin-top:0px }
	#fwNav1 .fwNavItem { box-sizing:border-box; float:none; overflow:hidden; width:100%; border-bottom:1px solid #FFFFFF; border-right:0; border-top:0; border-left:0 }
	#fwNav1 .fwNavItem a { padding-top:20px; padding-bottom:20px; padding-left:20px; padding-right:20px }
	#fwNav1 .fwFirstChild { border-top:0 }
	#fwNav1 .fwLastChild { border-bottom:0 }
	.fwNav1-toggle-label { display:block; position:relative; cursor:pointer; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none }
	.fwNav1-toggle-close { margin:20px auto 20px auto }
	.fwNavContainer1.fwMenuOn { margin-top:0; bottom:0 }
}
@media screen and (max-width:600px)
{
	#PageDiv { width:auto }
	#module-logo { padding-left:5px; padding-right:5px }
	#PageDiv #object-logo-1 { width:NaN% }
	#PageDiv #object-logo-2 { width:NaN% }
	#PageDiv #object-logo-3 { width:NaN% }
	#PageDiv #object-main { width:100% }
	#PageDiv #object-aside-aside { width:100% }
	#PageDiv #module-news-1 { width:100% }
	#PageDiv #module-news-2 { width:100% }
	#PageDiv #module-news-3 { width:100% }
}

There is something strange going on as I would not expect to see an undefined width

    #PageDiv #object-logo-1 { width:NaN% }

Double check your Breakpoint settings.

Then I would suggest trashing the contents of your Site Folder (or make a new one) and Publish Everything.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Richard · August 10, 2015, 7:45am

Your page-specific stylesheet overwrites the master stylesheet, so it seems that your padding settings are edited on the page, rather on the master.

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:

ThomasKimmich · August 10, 2015, 1:27pm

This is deja vue cause we talked about this project and exactly the same problems three months ago (or so) - and was convinced of already having solved this.

As I remember it is like Richard already said. Watch out where you make your changes and never overthink the master concept.

Finally double check the extended DIV dialogue. Cause this is another opportunity to overwrite default inspector settings.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

ThomasKimmich · August 10, 2015, 1:46pm

And if I’m in theme (and the devs as well):

So happily enough I’m using words under the cut - it’s the only thing I can think of prevented me from this issue? Perhaps - but possibly there is another explanation? Cause it’s weird if you have to do a page for let’s say a:

####Mississippisteamboatcaptain

Perhaps the key is as often in the construction?

If so, it’s time to introduce a thing I’d like to see in Freeway for longer now:

Box-Sizing: Border-box in Freeway’s workspace. Just for the protocol cause there will be the day when browser-vendors will switch their model as well - and I’m excited what happens then.

And a tipp:

In a strong inflow construction widths are declared by content and not a width on its wrapping item.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

DTP2 · August 10, 2015, 4:12pm

Hi All,

The first thing I did was trashed the contents folder and the webspace to make sure the issue was not caused here.

I also removed all the (possible) styling I did on the page itself and clicked the Apply Master Settings box to make sure all settings match.

Thomas, nothing in the Extended Dialog. The construction I used is based upon your webcasts and I honestly think that there is something wrong that if I switch to Inline Styles everything is ok and as soon as I switch to External Stylesheets everything immediately behaves different.

Have no clue and will continue fiddling with this.

freewaytalk mailing list
email@hidden
Update your subscriptions at:

ThomasKimmich · August 10, 2015, 4:31pm

Gosh - I posted the last comment within here and herby on wrong place.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Richard · August 12, 2015, 7:32am

You could try and send me you file… I’ll be happy to help you out

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:

DTP2 · August 12, 2015, 7:56am

Hi Richard,

Thanks for the offer. I’ll send the doc with Wetransfer. Is the hello@ the correct mail address?

freewaytalk mailing list
email@hidden
Update your subscriptions at:

Richard · August 12, 2015, 12:07pm

That will do just fine

freewaytalk mailing list
email@hidden
Update your subscriptions at:

DTP2 · August 14, 2015, 9:32am

Richard confirmed that there is an issue with an action causing the website not to respond as designed and expected and will be reported to Softpress.


@media screen and (max-width:320px)
{
	#PageDiv { max-width:320px; width:auto }
	#PageDiv #object-logo-1 { width:NaN% }
	#PageDiv #object-logo-2 { width:NaN% }
	#PageDiv #object-logo-3 { width:NaN% }
	#PageDiv #object-main { width:NaN% }
	#PageDiv #object-aside-aside { width:NaN% }
	#PageDiv #module-news-1 { width:NaN% }
	#PageDiv #module-news-2 { width:NaN% }
	#PageDiv #module-news-3 { width:NaN% }
}

In the mean time I removed all the Box Sizing actions from my div’s and started using percentages on my mobile pages. This seems to do the trick.

Thanks all and especially Richard!!

freewaytalk mailing list
email@hidden
Update your subscriptions at: