Responsive text & wrapping

Here’s a link to my website, which I’m building with Persona: http://davidspry.co/about

I’m trying to make the contents of my site responsive to the browser size.

On the linked page, the body text sits 100px from the top and is horizontally centred, and when the browser window is smaller than 660px the contents move 200px from the top to avoid the navigation text.

I want the text to stop moving once it is 40px from the left side of the browser, in line with the navigation text. I want an equal margin on the right side too, and I want the text to wrap once the browser is too small to display the text fully.

Could anyone help me with this? I’ve experimented with flex and columns, which seems to be the solution, but I don’t know how to implement them properly.

Thanks.

Hi,

I assume you are using this website builder (which I have not heard of before) and it seems to me that those templates are already responsive and device agnostic out of the box.

If you are using a website builder then it is best not to mess around with the structure too much otherwise it becomes pointless as you could write your own instead. There is a lot of advanced stuff going on in that website builder and unless you are expert at manipulating css then you will soon run into problems.

The first thing I notice about your page is that you have double scrollbars on the viewport which is a big no no from the start. It is caused by this rule:

.container {
	min-height: 100vh;
	margin: 20px;
}

If an element is 100% the height of the viewport and it also has 20px top and bottom margins then it will be 100% + 40px tall which is too big to fit in any container and thus causing the double scrollbars. It is unlikely you need the min-height in that rule at all and even if you do you will need to be careful how you use it and control it on smaller screens.

This smells a bit of magic numbers and should be avoided at all costs. What if someone has resize their text and then the 200px will not be enough to make room?

What you need to do is make it automatic instead.

You have a fixed left navigation on wide screens which is fine but at smaller screens you should put the navigation back in the flow and remove the fixed positioning with media queries at an appropriate viewport width. This means that you don’t then need to move the content at all and it will sit underneath without needing any positioning at all.

As far as the width goes on smaller screens then you only have text content so you don’t need any widths. You can set the left and right gutters with margins or padding on the container. The text will wrap automatically as required.

In your viewport meta tag you have this rule.

user-scalable=no

That disrespects your users and unless you are building an app or a specific control that shouldn’t be resized I would remove that from the meta tag as the first thing I do on mobile is to pinch and zoom because even with glasses I find mobile screens hard to read. I realise that rule may be left over from the website builder but its generally a bad rule :slight_smile:

Also be aware that fixed elements must never go out of the viewport because they can’t be accessed by a scrollbar (unless the fixed element is tied to the viewports dimensions and has its own scrollbar). For this reason you need to make sure that on smaller widths and heights that your fixed content is still accessible. It is best to remove fixed positioning on smaller screens or at smaller heights using media queries.[quote=“mail280, post:1, topic:246602”]
Could anyone help me with this? I’ve experimented with flex and columns
[/quote]

Not sure why you need something so advanced. Just remove the fixed positioning with media queries at around 800px width and then the content will sit as one column (with a few other minor tweaks).

Of course in some instances you may be fighting the website builder code which seems to have a lot of default stuff in place which brings me back to my first point of not trying to change the structure too much to start with unless you are experienced enough in over-riding all the extra code.

Try to keep things simple and do one step at a time.:slight_smile:

I forgot to mention that your website builder is also adding a lot of things dynamically with js at certain breakpoints and that could soon become very difficult to manage if you stray a long way from the template.

5 Likes

Thanks for your detailed response, Paul.

This seems more complex than what I’m able to manage currently. I’ll try to correct the things you noticed, but I guess I shouldn’t mess around with the template otherwise. I basically understand what you’re suggesting but I don’t know how to implement it.

Incidentally, when you say “back in the flow”, are you referring to flex-flow? I read something about that yesterday - assigning integers to divs as to a sequence.

I was able to style the text in accordance with viewport width, which is working, but I’m using fixed positioning for everything, which seems like a clumsy solution.

I’m trying to emulate some of the functionality of this website, which I really like: http://johnfeely.net/ If I wanted to try to build a site like this without using a builder like Persona/Squarespace/etc., how could I do that? What programs do developers use to write HTML/CSS?

Responsive text & wrapping

Hmmm. I admit I’m confused.

2 Likes

No, I mean the normal flow of the document (i.e. no positioning at all). Elements without positioning just take up the normal flow of the document and follow each other in the document and don’t overlap. You can move them around with margins etc but they will still follow naturally.

It’s only when you try to position things that the flow gets disrupted so its better to use other methods like float,display:table-cell, flexbox rather than absolute positioning as the other methods can be made to avoid each other automatically (or with a little help) but absolute or fixed elements are islands unto themselves and care nothing about other content.

4 Likes

Generally they just write it by hand but using a simple editor like notepad or something like brackets (there are many other editors around).

That layout is pretty simple in css/html terms but you do need to have a grasp of CSS in order to build it. It all depends whether you want to learn html and CSS or whether you just want a website. If you have no intention of learning CSS then you will have to go with a website builder and stick closely to the format offered.

If you want to learn Html and css then the possibilities are endless but you will need to put the effort in to make this happen.

Yes fixed positioning is best used in small doses in places such as a very small sidebar or a small header or footer. It is also best removed for smaller screens most of the time as they usually just eat up what is small screen space at the best of times.

You can make the fixed sidebar for wider screens and then just change it to non fixed width media queries at smaller widths. The main content can just be shifted to the side of the fixed element with margins and then remove the margins at the same time as you remove the fixed element and then they all sit vertically nicely.

If you want to learn from scratch we can start with the basics but it will take a while until you can make something as complex as those sites that your website builder offers.

4 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.