Project assistance little by little can go a long way

Ok, I’ve finished the Xway tutorial and have now started a new project, hopefully and humbly with a little help from my friends on this forum. If it is not too much to ask I will go forward thus: Stumbling on larger problems, I will post it with a link.test1, and then link.test2 (including the result from link 1) and so on in such a manner that other people can take advantage of the advice given progressively. I’ll keep all the links available indefinitely, or as long as needed. I guess sooner or later some will be outdated as Xway developes further.

I am/was a Freeway user with limited experience in html code and CSS.

Example/link 1: 7SeasCharter

In this first example I have a heading on the left and a menu on the right. How do I get the fonts smaller and also reposition the menu when downsizing the viewport? I’m sure the solution is in the User Guide somewhere but a head on help is always nice. Side note: An alphabetical index would be a great help and was sorely missed in the Freeway guide.

I have time on my hand so no rush from my side.

Please let me know if this is an acceptable approach. Any comments appreciated.

Kind regards,
Jon

Hi Jon,

It looks good so far.

I don’t think you need to worry about decreasing the font size for smaller devices. Although there’s less room on screen, people tend to look at phones and tablets from closer than they would look at a computer screen—so the same font generally works on different devices.

Personally, I would start off with a design in which boxes are arranged vertically rather than side-by-side (with the menu below or above the heading). If you want to arrange things horizontally, the way to do this is by using CSS flexbox. This is something that Xway will support directly in future (we’re working on it) but it’s possible to use extended style properties (in Xway) in the meantime.

We’re going to release a new version of Xway (b6) very soon—hopefully next week. This will allow you to insert navigation menus that collapse into hamburger menus on small screens (choose Menu from the Insert menu in Xway b6 when it’s released). We’ve also written an Xway Menu Tutorial to accompany b6 (as well as updating the current Xway Tutorial). We will make an announcement in this forum when b6 is released.

1 Like

First thing first; When I look on my iPhone SE in portrait mode the R in CHARTER disappears out to the right. A smaller font would be good I think. In Freeway I can choose different media types and adjust accordingly. Until something similar hopefully will be implemented in Xway what to do now?

With regards to horizontal/vertical placed menus I thought a horizontal would be a little different, but as I understand this will complicate matters for the moment I’ll try the vertical arranged option and see how that goes.

Thank you, Jeremy, and great news about a new version coming soon. I look forward to that.

For the “7 Seas Charter” heading (h1):

  1. Instead of applying separate styles to the paragraph (style1) and all the text within the paragraph (style2) you could create a default style for “Heading 1” within the brand box that contains all these properties. You can remove the existing paragraph style by clicking on the Inherit Style checkbox in the Paragraph Inspector. You can remove the span that encloses all the text within the paragraph by choosing None from the Type popup in the Span Inspector.

  2. Once you’ve tidied the styles, you can add the following as CSS Markup (in the Page Inspector):

@media screen and (max-width: 767px)
{
   #brand h1 { font-size: 0.8em }
}

This says that the font size for h1 elements within the brand box should be reduced to 0.8 em if the page is viewed on a screen that is no wider than 767px. You can replace 767px with a smaller breakpoint (e.g. 479px) if you want to avoid shrinking the text on screens that are slightly larger than your iPhone.

Your page is a bit unusual because the default font size is set to xx-large. This means an em (which is a relative measurement) is much larger than it would normally be. Currently, the font size is being set to 1em in the span that you’ve created for text within the heading (style2). The properties that you’ve currently set in paragraph and span styles are (paragraph: style1): text-align: center and (span: style2): font-size:1em; font-weight:400; letter-spacing:0.2em

For what it’s worth (new version out today) I’ll post my attempts at amendments as instructed, using the old version b5.

Example/link 2: 7SeasCharter

I have problems with text styles and where and how to style as there are some many alternatives in the inspector panel. I guess looking further into this will eventually brighten my day. Until then, I have a few queries. 1) I inserted the CSS markup as instructed, but for what I can see the text remains the same size on smaller viewports. 2) The vertical gap between menu/heading/main text I can’t seem to shorten. Any suggestions, please?

So, on to Xway b6. Could be fun.

  1. The CSS markup is being overridden by a paragraph style: if you put a text insertion point in the heading (" 7SEAS CHARTER") and turn on the Inherit Style checkbox in the Paragraph Inspector, this will remove the styling that you’ve applied to this paragraph. To set a default style for h1 elements within the brand box, select this box, choose Heading 1 in the Default Styles section of the Box Inspector, and choose/enter a size in the Size control. Since you’ve now removed the xx-large default font size, you probably need to use a different size in CSS Markup (try something that’s a bit smaller than the size you choose as the default Heading 1 size). How to choose between default styles, paragraph styles, and span styles: choose the most general style you can use (default page style > default box style > paragraph style > span style). This makes it easier to change things later on. If you want to style a particular paragraph (rather than all paragraphs of a particular type), put a text insertion point in the paragraph and use the Paragraph Inspector to style the paragraph. Selecting all the text and creating a span style is unnecessary, and something of a Freeway hangover.

  2. Reducing vertical gaps: have a look at the paragraph near the top of page 14 of the (most recent version) of the Xway Tutorial (search for: “2. Let’s reduce the vertical space between “Xway” and the following slogan.”).

Congratulations to all hard workers for the new version. I implemented a menu with ease.

On the downside, I am still struggling with text/CSS even after I thought I’d followed the last instructions to the letter. The size just doesn’t want to change with whatever I have tried of combinations, different sizes, different break points.

Example/link 3: 7SeasCharter

Hi Jon,

You’re almost there! You just need to remove the space before em in 0.5 em - and apologies for putting a space here in my earlier post (now corrected).

0.5em is probably too small, but you can change it to a larger size that is a bit smaller than the size you’ve set as a default style on the brand box (2em).

Something odd is going on. I deleted the gap but no change in behaviour. I also tried to delete the gap in (max-width: 479px).

Perhaps I should give it a rest for the moment and do other features on the site for a while. It’s easy to get bogged down. You know, can’t see the forest for the trees kind of thing.

Example/link4: 7SeasCharter

It doesn’t do any harm to delete the gap before 0.5, but the gap that you need to delete is after 0.5 — don’t separate the measurement (0.5) from its unit (em).

…which I thought I had tried before and failed as you can see here (that it doesn’t work):

example/link5: 7SeasCharter

I’m sorry to take up your time with this, but is it anything else I can do? Like sending you the Xway folder? I’m taking the weekend off from tomorrow so I’m not in a hurry.

What happens if you remove the default size of 2em that you’ve set in the Text section of the Document Inspector or Page Inspector? To remove this value, click on the Size control popup in the Page Inspector and choose Undefined (or delete the value). If it still says 2em, do the same for the master page. If it still says 2em, do the same in the Document Inspector.

Here are some really simple steps for a new document:

  1. New document
  2. Insert a box
  3. Set the ID to be brand
  4. Type “Hello world”
  5. Choose Heading 1 from the Paragraph Inspector
  6. Enter the following as CSS Markup in the Page Inspector:
@media screen and (max-width: 767px)
{
   #brand h1 { font-size:1.5em }
}

This definitely works for me.

An extra debugging tip: set a colour to see if the breakpoint is working. E.g.

@media screen and (max-width: 767px)
{
   #brand h1 { font-size:1.5em; color:red }
}

The size in the text section has been set at 1.5em. If I change it (in Document or Page Inspector), to undefined it becomes medium and the font becomes smaller. If I change it to 2em it becomes bigger, too big in fact. Either way it doesn’t make any difference of the behaviour.
The “Hello world” in a new document works fine.

Hi Jon,

Maybe the easiest thing would be if you send us your document [*] and we’ll take a look at it.

[*] Send it to support at softpress dot com. If it’s too big to send as an email attachment, put it on a file-sharing service (e.g. Dropbox) and send us the link.

Hi Jon,

Thanks for sending your document. You’ve added some superfluous (and incorrect) CSS Markup which is causing this problem. If you delete the line that says font-family: 'IM Fell English SC', serif; at the top of the CSS Markup box, the breakpoint works.

Puh! And thank you. So easy to find and correct a fault when you know what you are doing.

This is a google font and to my defence I copied and embedded this line as per instructed by Google: “CSS rules to specify families”, “font-family: ‘IM Fell English SC’, serif;”

Ok, on to new issues. Once again, thank you for staying with me. Brilliant.

Example/link6: 7SeasCharter

Xway supports Google fonts automatically if you add a font URL in the Fonts view (which you have done). You don’t need to add any extra markup.