Problem with tables display on smartphones

Hello everyone.

I’m currently working on 'Build your own Cheatsheet" Project.
https://www.codecademy.com/paths/front-end-engineer-career-path/tracks/fecp-web-development-fundamentals/modules/fecp-challenge-project-build-your-own-cheat-sheet/projects/independent-project-html-documentation

I have a problem with smartphone display when I check with the Toggle Device Toolbar in the DevTools. It’s working fine for computer and tablet screens, but not with smartphones.
The first table is not aligned with the rest of the page.

Here are the links to my work:
https://github.com/Virginia-Fay/Cheatsheet
https://virginia-fay.github.io/Cheatsheet/

Does anybody know how I could solve the problem?

I looked into your repo. The issue with using table along with a responsive design is, the content inside the td tag tends to drag through words, if a particular css property named word-break hasn’t been set. That is, if you don’t set it, the browser tries to fit it into the td element accordingly. But once you set the property, you are explicitly mentioning the browser or webpage to break the word after white spaces (or any other word-break property)

Check the css file in my pull request of your repo for the edited code. (If merging, remove all the files after merging except for the html and the css)

Below is an attached image of the edit:

Pull request link: GitHub PR

You can find more details about a similar issue here: https://stackoverflow.com/questions/14477156/text-not-wrapping-in-p-tag

1 Like

Thanks for your solution, it’s working! :grinning_face_with_smiling_eyes:
I tried it directly on Visual Studio Code.

It’s my very first time with a pull request on Github. I can see your change in styles.css, but there are also other .idea files, for example .idea/gitignore.

Should I do the change directly in my repository in the css file or is there a way that I can accept your change and it will automatically update the document?

You can remove the whole .idea folder. You just need to “merge” the pull request (After merging you can remove the .idea folder).

Here is a link to help you out: https://developers.sap.com/tutorials/webide-github-merge-pull-request.html

If you are not able to do it, no issues. It’s nice to know the solution worked. Thanks.

After a second check-up (smartphone display), the tables are aligned with the rest of the page, but there are now breaks in the middle of words in my first column and second columns, for example:

control
s

Docu
ment
Type
Declar
ation
HTML
Eleme
nt

There’s no problem in the third column “Description”. :thinking:

@virginia_20 Yes, that’s bound to happen and it’s totally normal for css to behave like that because now it’s trying to break the words at arbitrary characters to maintain the layout alignment. To counter this problem, you can introduce a min-width (or max-width) property for td cells or min-width (or max-width) property to the whole table as a media query for small screen devices. You can also try out different word-break properties like normal, etc as per requirements. In order to preserve the alignment, you’ll want to use word-break and if you want word length preservation you will have to add or replace word-break with min-width properties.

Also if there are pre-formatted texts in your content enclosed within <pre> or <code> tags, you will need to wrap them accordingly, as pre-formatted texts preserve spaces and line breaks.

Okay, so you have indeed used some pre-formatted text. When you use tags like <code> it’s advised that you enclose them within <pre> HTML tags (pre-formatted text), and style them accordingly.

Here is the link to the edited code: https://github.com/Virginia-Fay/Cheatsheet/pulls

And if you want, now you can remove the word-break property from the css file under td element.

1 Like

Thanks a lot! It’s working! :star_struck:
I even managed to merge your pull request!

I have not studied the course “Making a website responsive” yet so it was very helpful!

1 Like