Need Help with Cross-Platform Formatting – Text Layout Issues on PC vs Mobile

Hello everyone,

The Issue:

I'm currently facing a rather frustrating issue on my website concerning text layout. While the text appears perfectly formatted on a PC, the mobile version is a different story. I seem to get excessive line breaks and misalignment that disrupt the user experience.

The Context:

The site looks great when I design it specifically for desktop view. However, when I make adjustments to improve the mobile layout, it negatively impacts the desktop version, and vice versa. I can't seem to strike a balance where both versions look good.

Specific Problems:

- Desktop: Text and layout look fine.
- Mobile: Excessive line breaks disrupt the text layout.

Questions:

1. Has anyone faced similar cross-platform formatting issues?
2. Are there CSS rules or responsive design methods that can be used to standardize the layout across both platforms?
3. Is it possible to apply different styles based on the device being used without breaking the layout on the other?

My Website: https://mindofalexander.squarespace.com

Please See Screenshots Below!

Any advice or fixes would be greatly appreciated. It's a real challenge trying to make the site look good on both PC and mobile.

Thank you for your time and expertise!

Gratefully,
Alexander

Bump

You are getting line breaks in strange places because you are putting in manual line breaks, but when the text length exceeds the manual line break by one word, you end up with an orphaned word on it's own line.

You can either remove the manual line breaks within paragraphs (which I can see are causing problems on both desktop and mobile) and have the text break where it is appropriate based on the responsive text block size and font size, or you can use a media query to just remove them on mobile like this:

// remove manual line break on mobile
@media only screen and (max-width:640px) {
  br {
    display:none;
  }
}

3 hours ago, Ziggy said:

You are getting line breaks in strange places because you are putting in manual line breaks, but when the text length exceeds the manual line break by one word, you end up with an orphaned word on it's own line.

You can either remove the manual line breaks within paragraphs (which I can see are causing problems on both desktop and mobile) and have the text break where it is appropriate based on the responsive text block size and font size, or you can use a media query to just remove them on mobile like this:

// remove manual line break on mobile
@media only screen and (max-width:640px) {
  br {
    display:none;
  }
}

Hi there @Ziggy

I appreciate your input and the code you provided.

I'm trying to achieve a specific visual format for the text on PC by using manual line breaks, but I'm struggling to replicate that look on mobile without the orphans and line breaks. I attempted to use the media query you suggested, but it hasn't resolved the issue. (Please see attached)

I understand that removing manual line breaks within paragraphs might be a solution, but I'm unsure how to do this while maintaining the desired format. Any further guidance would be greatly appreciated.

Thank you!

Generally the only advise I can give you for designing for a responsive website is not to be too rigid with the design, and although line breaks can work on very specific screen resolutions they cause more problems than they solve. This is an example from a slightly small laptop screen size, it would look far better without the breaks:

54 minutes ago, Ziggy said:

Generally the only advise I can give you for designing for a responsive website is not to be too rigid with the design, and although line breaks can work on very specific screen resolutions they cause more problems than they solve. This is an example from a slightly small laptop screen size, it would look far better without the breaks:

@Ziggy

Thanks for your advice on manual line breaks and responsive design. Just to clarify, my attached screenshots actually show text with the line breaks removed, and as you can see, it doesn't meet the standard of typography I'm aiming for on a graphic design portfolio page. 

I get that design needs to be flexible, but shouldn't it be possible to maintain the text's intended shape while scaling it for different devices? Your media query suggestion didn't fully solve the issue. Do you have any further advice on achieving a consistent yet responsive text layout?

Bump

On 9/4/2023 at 3:53 PM, mindofalexander said:

Do you have any further advice on achieving a consistent yet responsive text layout?

Not really, the only thing that *might help is setting the fonts up with a vw value that scales the font based on the viewport width, but this isn't necessarily going to solve you wanting to control the line break points.

9 minutes ago, Ziggy said:

Not really, the only thing that *might help is setting the fonts up with a vw value that scales the font based on the viewport width, but this isn't necessarily going to solve you wanting to control the line break points.

@Ziggy

Thank you for your efforts so far. However, it seems like we've reached a point where we're not able to find the comprehensive solutions I'm looking for. Your recent messages give me the impression that you might not have the interest or perhaps the solutions for overcoming the specific challenges we're facing with this project.

Given the project's needs and my commitment to solving these issues effectively rather than applying band-aids, I feel it might be best to seek expertise elsewhere.

If my impression is wrong, and you're willing to explore more involved solutions, I'm all ears. Otherwise, I appreciate your honesty and will begin looking into other avenues for solving these problems.

I'm always happy to try and help where I can, but I'm not paid to answer questions on this forum. I have tried to give you my best advice, and given you multiple different solutions, but you're welcome to seek others advice here.

On 9/5/2023 at 5:11 PM, Ziggy said:

I'm always happy to try and help where I can, but I'm not paid to answer questions on this forum. I have tried to give you my best advice, and given you multiple different solutions, but you're welcome to seek others advice here.

@Ziggy

I understand that your contributions here are voluntary and not paid. I never intended to imply otherwise, and I apologize if my previous message gave that impression.

You've offered suggestions, and for that, I'm grateful. However, it's fair to say that while these are potential avenues to explore, they haven't yet resolved the issues outlined in the screenshots. My aim was not to undermine your expertise, but to communicate the specific challenges I'm facing and seek further guidance. 

I appreciate the time you've already spent trying to help me, and I understand if you don't have the answers I'm looking for. If that's the case, it's perfectly okay. I'll continue to explore other solutions and advice. 

Thank you again for your assistance and for being part of this community where we can all learn and grow.

Bump

Do you still need help? Can you describe again all current problems?

32 minutes ago, tuanphan said:

Do you still need help? Can you describe again all current problems?

I do still need help and your assistance would be greatly appreciated! 🙂

Problems:

- On my website, text formatting varies on different devices and screen sizes. 
- The "Let's Work Together" page loses its shape when the screen size changes. 
- The "About Me" page has line breaks on smaller screens, making it look messy. 

 Need Solutions For:

- Keep text formatting consistent across all devices and screen sizes. 
- Ensure that the "Let's Work Together" text maintains its shape but adjusts in size for different screens. 
- Prevent line breaks in the "About Me" text on mobile and other screens, keeping it neat and organized. 

Please see images above in this thread for examples of error on my site.

Website: https://mindofalexander.squarespace.com/

Thank you so much for your help @tuanphan

Bump @tuanphan

- The "About Me" page has line breaks on smaller screens, making it look messy. 

You mean need these

stacked like this?

- The "Let's Work Together" page loses its shape when the screen size changes. 

https://mindofalexander.squarespace.com/lets-work-together

You need to need these text same on all screen sizes (Except mobile)?

7 hours ago, tuanphan said:

- The "About Me" page has line breaks on smaller screens, making it look messy. 

You mean need these

stacked like this?

- The "Let's Work Together" page loses its shape when the screen size changes. 

https://mindofalexander.squarespace.com/lets-work-together

You need to need these text same on all screen sizes (Except mobile)?

 

@tuanphan

Certainly, the "About Me" page should feature continuous text that dynamically adapts to screen size. The footer details—location, academic background, and contact—should remain stacked.

Example:

Based in: Boston, Massachusetts  
Academic Background: BA - Curry College  
Let’s Connect: emailme@mindofalexander.com

For the "Let's Work Together" page, the layout should maintain its integrity across all screen sizes, resizing text as needed for optimal aesthetics.

With about page, try this CSS code

/* About page */
.fe-block.fe-block-yui_3_17_2_1_1694290222385_17049 p span.sqsrte-text-color--black {
    white-space: nowrap;
}
@media screen and (max-width:767px) {
    .fe-block.fe-block-yui_3_17_2_1_1694290222385_17049 p span.sqsrte-text-color--black:first-child {
    white-space: initial !important;
}
}

With Let's Work Together, try this CSS

#collection-64e3e3fe2c66a21ffdcd157b .content-wrapper {
    margin-top: 45px !important;
}
.fluid-engine.fe-64e4258e1cd73b340c2608b5 {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;  
}
@media screen and (min-width: 768px) and (max-width: 1150px) {
.fe-block.fe-block-yui_3_17_2_1_1692903298702_8687 {
    width: 40%;
}
.fe-block-yui_3_17_2_1_1692657168167_107914 {
    width: 40%;
    margin-right: 10%;
}}
@media screen and (min-width: 1150px) {
.fe-block.fe-block-yui_3_17_2_1_1692903298702_8687 {
    width: 40%;
}
.fe-block-yui_3_17_2_1_1692657168167_107914 {
    width: 30%;
    margin-right: 10%;
}}

On 9/22/2023 at 4:13 AM, tuanphan said:

With Let's Work Together, try this CSS

#collection-64e3e3fe2c66a21ffdcd157b .content-wrapper {
    margin-top: 45px !important;
}
.fluid-engine.fe-64e4258e1cd73b340c2608b5 {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;  
}
@media screen and (min-width: 768px) and (max-width: 1150px) {
.fe-block.fe-block-yui_3_17_2_1_1692903298702_8687 {
    width: 40%;
}
.fe-block-yui_3_17_2_1_1692657168167_107914 {
    width: 40%;
    margin-right: 10%;
}}
@media screen and (min-width: 1150px) {
.fe-block.fe-block-yui_3_17_2_1_1692903298702_8687 {
    width: 40%;
}
.fe-block-yui_3_17_2_1_1692657168167_107914 {
    width: 30%;
    margin-right: 10%;
}}

@tuanphan

Despite our previous efforts, the "About" page is still experiencing line break issues. The text does not appear as intended, and it affects the overall look and readability of the page.

Additionally, I applied the code you sent for the "Let’s Work Together" page. Unfortunately, it caused the graphics to shift upwards on the PC view and was challenging to manage. While the page appears satisfactory on mobile view, I am concerned about its appearance on various screen sizes.

For now, the "About" page requires minor adjustments, and although the "Let’s Work Together" page looks decent on mobile, ensuring its compatibility with all screen sizes would be awesome.