Why is my mobile page content cut off on the dawn theme?

Store Design
, ,

Topic summary

A user encountered content being cut off on mobile devices while using the Dawn theme. The issue stemmed from a hard-coded table element set to 412px width, which exceeded mobile screen dimensions.

Proposed Solutions:

  • AfterDarkGrafx identified the root cause as hard-coded table width and suggested three approaches: reducing table width to 350px (affects desktop too), converting tables to divs with CSS formatting, or creating separate mobile/desktop versions with conditional visibility.

  • PageFly-Henry provided CSS code to add to base.css that sets table width to 360px and td width to 80px with !important flags.

  • David_SHT offered a media query solution targeting max-width 768px, setting table/tr width to 340px and td elements to 80px with 0.5em padding.

Resolution:
The original poster confirmed that PageFly-Henry’s CSS solution successfully resolved the mobile display issue.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hello,

On mobile devices only, content is cut off on the side .What code do I need to add so it’s not cut off on mobile view?

IMG_7466.jpeg
IMG_7466.jpeg1170×2532 181 KB

Page url: https://prettypleaseatelier.com/pages/livraison

2

@NaomiNN Ca Va? - that section uses TABLES and is HARD coded to be 412px wide.

You can go to that page, change it to source code and change the table width to 350px and this may help but it will also affect desktop.

To do this correctly, you can:

a) convert the table, tr, td to div elements then add CSS to format it

or

b) do what I say above and live with the sizing on desktop and mobile

or

c) make a mobile only version and desktop only version (you would have to add a class to the table, duplicate the table, hide one on desktop and then hide the other on mobile) (this would be a paid service from anyone on the forums or experts)

AfterDarkGrafx_0-1695080218846.png
AfterDarkGrafx_0-1695080218846.png1394×676 105 KB

1 Like
3

Hi @NaomiNN

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

table:not([class]) {

width: 360px !important;

}

tbody td {

width: 80px !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
4

Hi @NaomiNN ,

This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

@media (max-width: 768px) {
  table:not([class]) td {
    padding: 0.5em !important;
    width: 80px !important;
 }
 .rte table {
   width: 340px;
 }
}

result:

David_SHT_0-1695096539960.png
David_SHT_0-1695096539960.png752×2258 124 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

1 Like
5

Hi @AfterDarkGrafx :slightly_smiling_face:

Thank you for your reply!

6

Hi @PageFly-Henry

Thank you so much for your help Henry, the code worked. Have a nice day! :blush:

7

Hi @David_SHT

Thank you so much for your help. Have a nice day! :blush: