Split: mobile editing

easyitalianonline · Member · Oct 17, 2023 at 3:11 am
Copy link

Add topic to favorites
Hello! Our mobile website layout isn’t translating well from the desktop version. It’s too narrow so, for instance, heading words are splitting across lines & the images are either sized incorrectly or cropping improperly. Could you please help me fix this? http://www.easyitalianonline.com

Thanks!
dragstor · Member · Oct 17, 2023 at 6:32 am
Copy link
Hi there! 👋🏼

Our mobile website layout isn’t translating well from the desktop version. It’s too narrow so, for instance, heading words are splitting across lines & the images are either sized incorrectly or cropping improperly. Could you please help me fix this?

I checked your site and see you’ve set a fixed font-size attribute for your headings to 53px.

I suggest setting the font size to Large (or any appropriate), and it should display correctly on various screen sizes.

If you still prefer using the 53px as the size of the headings, you can leave it as-is, but a CSS snippet will be needed for this:
```
/* Headings fix | (NST) */

@media only screen and (max-width: 559px) {
    h1,h2,h3,h4,h5,h6 {
        font-size: clamp(2.156rem, 2.156rem + ((1vw - 0.2rem) * 2.907), 3.9rem) !important;
        word-break: break-word;
    }
    
}

/* END | (NST) */
```
Here’s how to add it to your site:

How to Add Custom CSS
in WordPress.com Support
6 min read
You can use the CSS editor to customize the appearance of your WordPress.com site. It allows you to add your own CSS styles to override the default styles of your theme. This feature is available on sites with our WordPress.com Premium, Business, and Commerce plans. If your site has one of our legacy plans, it is available on the Pro plan. Access the CSS Editor Styles In themes

As for the images — I suggest referring to the Cropping section of the guide for the Media and Text block:

Blocks (The Full List) » Media & Text Block
in WordPress.com Support
3 min read
Use the Media & Text block to place an image or video to the left or right of the text. Add the Media & Text Block To add the Media & Text block, click on the + Block Inserter icon and search for “media”. Click it to add the block to the post or page. 💡 Using your keyboard, you can also type /media on a new line and press enter to quickly add a new Media & Text block.

I hope this helps!

No items found.