x

Text cut in half on smaller computer screens

Hi all,

I'm having an issue with a site I'm creating, in which it's supposed to be responsive but words are getting cut in half in different screens, how does this happen?

For example, "Diagnostics" looks like

Diag

nost

ics

on some smaller screens

You can see how this affects the text on this site: http://springfieldcreative.loginportal.site/preview/e06obd.1cjifgnjda8bf.385464d8d97b05a32aeff6f1805... as you adjust the browser size.

Is there any way of stopping these words being cut?

606 Views
Message 1 of 6
Report
5 REPLIES 5

@Jordan_Burton20 

Displays just fine for me regardless of monitor size - Windows 10/Chrome/Firefox all latest versions...

600 Views
Message 7 of 6
Report

imageHi @NJRFTF , thanks for getting back to me, this is what is displaying for me and for my client when they preview, how come it's different for yourself?image

597 Views
Message 7 of 6
Report

@Jordan_Burton20 

This is what I get....

imageimageimageimageimage

589 Views
Message 7 of 6
Report

@Jordan_Burton20 

Also - looks like you should enable SSL also?

588 Views
Message 7 of 6
Report

The primary issue is that you're splitting each content section into three columns with the main content column being only 50% wide. Weebly columns are useful to a certain extent but can introduce considerable problems when the page is viewed on different screen sizes. Columns will shrink proportionally as the width of the screen shrinks (you can emulate a mobile sized screen by shrinking the width of your desktop browser window). While enclosing your section content within 50% of the screen on the desktop may look just fine, as you shrink the screen to the size of a small laptop screen (12-14") or a large tablet, you'll see that using only 50% of the screen real estate produces way too much text wrapping. As the screen width shrinks (e.g., on mobile devices), your page content should fluidly expand to fill more of the available screen real estate. This behavior is not possible with Weebly columns. They'll remain in proportion to each other until they hit the mobile breakpoint where they switch from a horizontal arrangement to a vertically stack.

Your use of larger sized fonts becomes problematic on smaller sized screens and, when the columns shrink enough, that large text will be forced to wrap inside them. You could potentially address this with something called media queries in the site's styling code but, if you don't know how to code cascading style sheets (css) then this isn't something you'll be able to do. Accordingly, you should try to expand the proportional width of your center content column as much as makes sense (instead of 50%, try something closer to 80% screen width with each of the two side columns occupying around 10%). Shrink your browser window width to emulate how the page content will look on smaller sized screens to see how the content behaves. One other thing: I would not use the Weebly font sizer in the floating text edit bar. Only set the font size via the Theme > Change Fonts panel. Increasing or decreasing the default font size for any text (header, paragraph) via the text edit bar more often than not will generate undesirable results when rendered on mobile.

Lesson of the day: keep it simple. Weebly has plenty of ways to tweak content attributes but some of these are best left unused and you'll see this quite clearly when you view the behavior of your page content across multiple screen sizes (again, emulate this by shrinking the width of your desktop browser). Remember, what looks great on a desktop sized screen can look quite terrible on mobile. When building your site pages, you have to continually test the content rendering against multiple screen sizes (desktop sized, small laptop sized, tablet sized, phone sized).

556 Views
Message 7 of 6
Report
This thread has been archived and locked. Please start a new thread if you would like to continue the conversation.