Hello. . . What is the best way in Freeway Pro 7, or is there a way, to remove css styling at a break point? I have a shadow and rounded corners that are not necessary at the really small(320px) size.
Kind Regards, Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
is there a way, to remove css styling at a break point? I have a shadow and rounded corners that are not necessary at the really small(320px) size.
How are you adding this at the default size?
I think that I would write a media query by hand to zero the CSS attributes that you used to create these effects.
If you used an action to add the effects then you will have to do it this way as actions are not media query aware.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You can’t really remove a style, but you can set another style that would override the properties you want to make disappear.
@media (max-width:350px){
.some_selector {
border-radius: 0;
box-shadow: none;
}
}
That is the general idea. I don’t know if you can create these styles any way except through Page / HTML Markup and a container.
Walter
On Mar 15, 2015, at 4:23 PM, TeamSDA email@hidden wrote:
Hello. . . What is the best way in Freeway Pro 7, or is there a way, to remove css styling at a break point? I have a shadow and rounded corners that are not necessary at the really small(320px) size.
Kind Regards, Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks for your reply. . .
Dave, I am adding the shadow using the Freeway 7 inspector. As for the rounded corners I am adding a border-radius in the extended div, style.
Walter, tried making this style in the styles panel but not having any luck. How would I go about doing this via your Page / HTML Markup and a container method?
Kind Regards, Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Best way to create a style to over-ride the style you have set is to create a single object on a FW page - call it item1 for example.
If you use a new blank document then you can view source to see all attributes attached to item1.
Then it is a simple copy/paste of the style into Page>Html Markup before zeroing the values you wish to remove.
This new style will be wrapped in a media query as Walter suggested something like
<style type="text/css">
@media screen and (max-width:320px)
{
#item1 { border-radius: 0; box-shadow:none; }
}
</style>
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Dave. . . Thank you for this. Below is what I was playing with just prior to receiving your post and it seemed to work.
<style>
@media screen and (max-width:320px)
{
#item1 { border-radius: 0; box-shadow: none }
#item2 { border-radius: 0; box-shadow: none }
#item3 { border-radius: 0; box-shadow: none }
#item4 { border-radius: 0; box-shadow: none }
#item5 { border-radius: 0; box-shadow: none }
#item6 { border-radius: 0; box-shadow: none }
}
</style>
Kind Regards,
Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Do I actually need the or is what I have good as well?
You should use it.
And yes you can use a comma separated list like #item1, #item2, #item3 { gegfigifgi }
But you could also add a class to each item that you wanted to affect and use the class in your Media query such as
.myclass { noborder stuff }
You would just select each item and add the class using Item>Extended ie class: myclass
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank You Dave… Most helpful.
Kind Reagards, Dave Sutherland
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hmmm… Just poped in the instead of just and it breaks in iOS.
Thoughts?
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Could I get a little clarification…
I have been using the opening tag and the closing tag when adding styles to the head of a page. Is this correct or should I be doing it as it was suggested above?
. I was under the understanding this was to be used as part of a link, in the head, for the purpose of pulling the styles from an external style sheet, not as an opening for styles which live in the head of the page itself? Kind Regards, Dave _______________________________________________ freewaytalk mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/optionsMy understanding is low but the following:
The type stands for the MIME type of …
In HTML5 the type is not required anymore cause HTML is a living standard right now so
<style> ...styles are going here ... </style>
is pretty much OK if the page is set to HTML5.
A link doesn’t require the type as well - but the rel-attribute.
One points external, the other one to internal additional css resources.
Lower HTML specs may require a declaration, but just for validation purposes. Never had really problems with it.
But I may fail hard here - and others will correct me.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank You Thomas…
Appreciate your input. The following link seems to verify what you are saying that if the site is HTML 5 the type attribute is no longer needed. http://www.w3schools.com/tags/att_style_type.asp
Apologies for any confusion regarding the “Link” reference. I was referring to something like the following for my example.
Kind Regards, Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you guys for your help…
One further question so I set things up properly. If I am making a style adjustment at a mid breakpoint e.g. 800px, would I need to reset the property at the next breakpoint e.g. 500px, to have the style return?
I ask as it seems that all style adjustments I make at a given breakpoint seem to flow all the way down to the smallest breakpoint.
Kind Regards, Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Just poped in the instead of just and it breaks in iOS.
I would be interested to see that page. I am not aware of it breaking things in iOS - unless it is malformed.
I ask as it seems that all style adjustments I make at a given breakpoint seem to flow all the way down to the smallest breakpoint.
That is exactly what CSS refers to - Cascading Style Sheets - so if you use a media query to remove an attribute from an item that is less than a certain width it will apply to all items less than that width (the cascade effect).
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks Dave… As for the break, I think it was me entering something wrong, all is good now.
In regards to the media query, I just wanted to be sure that is just another form of CSS and behaves as other css properties do. Building with the new Freeway Pro 7 and building a complete responsive site is new to me.
Again thank you for clarifying, so very helpful.
Kind Regards, Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
One thing to watch out for – particularly if you copy and paste from a Web page or Mail – is curly-quotes. This will break:
while this will work:
<style type="text/css"></style>
FreewayTalk on the Web (and Mac OS in general) will try to make typographically correct (smart) quotes, which absolutely do not work in HTML or any other code format. Only straight-up-and-down (dumb) quotes will work in that context.
Walter
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thank you Walt… Usually I rinse any code by placing it into text edit (Plain Text) first. Did not do that step. Sounds like this is what happened.
Great reminder, Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
You may be happy doing what you’re doing,m but I just wanted to jump in quickly and say that the shadow you applied using the Inspector can just be removed in the Inspector at the smaller breakpoint.
The rounded corners can be removed using the same method you used to apply them (but at the smaller breakpoint) — you just need to set the values to 0.
Cheers,
Joe
On 17 Mar 2015, at 13:39, TeamSDA email@hidden wrote:
Thank you Walt… Usually I rinse any code by placing it into text edit (Plain Text) first. Did not do that step. Sounds like this is what happened.
Great reminder, Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Wow Joe… Don’t know how I missed this in the extended reference guide. I read over that section several times, thanks for pointing this out.
Having said that, I do appreciate those who explained this better as I can now do other things that may be needed at varied break points.
Kind Regards, Dave
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
the shadow you applied using the Inspector can just be removed in the Inspector at the smaller breakpoint.
Joe - Can you just clarify for the rest of us what styling/attributes can be adjusted in the Inspector at differing breakpoints.
D
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options