Responsive Code Block

serhan · December 12, 2023

Hey There,

I was wondering is someone can give me a hand with making the 'code block' responsive. Currently i have a table with the code block but the table isn't responsive in mobile view.

The password is jai123!@#

Ziggy · December 12, 2023

Can you share your website URL and this page?

In what way do you want the table to be responsive? Stacking all of the cells in each row?

serhan · December 14, 2023

Thanks Ziggy.

Here is the URL https://gecko-tomato.squarespace.com/global-fund

At the moment, it's cutting out the last row. Ideally, I want to have it all visible.

Ziggy · December 14, 2023

5 hours ago, serhan said:

At the moment, it's cutting out the last row. Ideally, I want to have it all visible.

The only practical way of doing that would be on mobile to make the font size smaller and responsive to the page width and the padding narrower, but this would impact legibility.

serhan · December 15, 2023

Thanks, Ziggy.

Would you be able to assist with that code?

Ziggy · December 15, 2023

8 hours ago, serhan said:

Would you be able to assist with that code?

Sure, add this below the rest of the table styling:

@media only screen and (max-width:640px) {
  table.unstyledTable thead th {
    font-size: 3vw;
    line-height: 1.2em;
    vertical-align: bottom;
  }
  table.unstyledTable tbody td {
    font-size: 3vw;
    line-height: 1.2em;
  }
}

Let me know how that goes.

Responsive Code Block

Recommended Posts

serhan

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Ziggy

Ziggy

Posted Images

Ziggy

Link to comment

serhan

Link to comment

Ziggy

Link to comment

serhan

Link to comment

Ziggy

Link to comment

Create an account or sign in to comment

News

Ziggy

Ziggy

Events

Circle Day

Resources

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources