On the mobile footer, arrange the two text items "policy" and "info" in a horizontal layout

Store Design
, ,

Topic summary

A user seeks to display two footer text items (“policy” and “info”) horizontally on mobile devices for their website bmcarcover.com.

Solutions Provided:

Two community members offered CSS-based approaches:

  • First solution: Targets .footer-block__details-content.rte p elements, using display: inline with a pipe separator (" | ") between items via CSS ::after pseudo-element.

  • Second solution: Provides two CSS variants depending on footer structure:

    • For wrapper-based layouts: Uses flexbox on .mobile-footer-row with centered alignment and gap spacing
    • For list-based layouts: Applies flexbox to .footer__links with !important flags to override existing styles

Both solutions use @media screen and (max-width: 768px) or (max-width: 767px) to target mobile viewports only. The code snippets should be added to the theme’s CSS file.

Status: Multiple working solutions provided; awaiting implementation feedback from the original poster.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

On the mobile footer, arrange the two text items “policy” and “info” in a horizontal layout.

web: www.bmcarcover.com

2

@Jim_65

Please add the following code at the bottom of your css file

@media screen and (max-width: 768px) {
  .footer-block__details-content.rte p {
    display: inline;
    margin-right: 6px;
}
.footer-block__details-content.rte p:not(:last-child)::after {
    content: " | ";
}
}

Hope this works!

3

Hi,

Hope this will help

  • At footer Find the two links “policy” and “info”
  • Add a wrapper (if needed)
  • Add CSS (make them horizontal only on phones)

CSS example

/* Put this in your theme CSS file (assets/...css) */
@media screen and (max-width: 767px) {
  .mobile-footer-row {
    display: flex;            /* put children in a row */
    flex-direction: row;      /* horizontal */
    justify-content: center;  /* center them horizontally */
    align-items: center;      /* center vertically */
    gap: 12px;                /* space between links */
    padding: 6px 0;
  }

  .mobile-footer-row a {
    display: inline-block;
    padding: 6px 8px;
    font-size: 14px;          /* adjust size if needed */
    text-decoration: none;
  }
}
  • If your footer uses a list () instead of separate anchors, use this variant:

CSS example

@media screen and (max-width: 767px) {
  .footer .footer__links {
    display: flex !important;
    gap: 12px;
    justify-content: center;
    align-items: center;
  }
  .footer .footer__links li {
    display: inline-block !important;
    margin: 0 !important;
    width: auto !important;
  }
}