Text block on About Us page – how to make fixed and responsive? Baseline Theme

MJ82 · ‎10-23-2024

Hello,

The text block on our About Us page (Baseline Theme) goes very thin when the browser window is made smaller. We'd like it to stay a formatted block of text and to stay responsive when the browser is made smaller.

Is this possible?

If you see here, when it is full screen, it is a perfect block of text in the center of the page. If you make the browser window narrow, the text doesn't stay in a block.

URL: https://contrakidsmutiny.com/pages/about-us

We would like it to respond like this instead: https://wearebraindead.com/pages/about-us

PageFly-Richard · ‎10-23-2024

Hi @MJ82

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

{% if handle contains 'about-us' %}
<style>
.page {
    max-width: 460px;
    margin: 0 auto;
}
section.page.text-primary-text.bg-primary-background.border-t-grid.border-grid-color {
padding: 0 !important;
}
</style>
{%endif%}

Hope this can help you solve the issue

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

MJ82 · ‎10-24-2024

Hello,

I searched for </head> in theme.liquid and there was no tag just like this, above which to paste your code.

I only found 1 mention of 'head' as below ib blue:

<!doctype html>
<html class="no-js supports-no-cookies" lang="{{ request.locale.iso_code }}">
{% include 'easy-coming-soon' %}<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="{{ settings.color_accent }}">
<link rel="canonical" href="{{ canonical_url }}">
<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>
<link rel="preconnect" href="https://fonts.shopify.com" crossorigin>
<link rel="preconnect" href="https://monorail-edge.shopifysvc.com">

Text block on About Us page – how to make fixed and responsive? Baseline Theme

Text block on About Us page – how to make fixed and responsive? Baseline Theme

Community Blog Articles