Side By Side Rich Text Mobile

Store Design
, , , , ,

Topic summary

A user seeks help making rich text elements display side by side on mobile for their Shopify store page (petesrubbers.com/pages/diesel). Currently, a button and text stack vertically on mobile devices.

Proposed Solution:

  • Use CSS flexbox to arrange elements horizontally
  • Apply display: flex with align-items: center and justify-content: space-between
  • Add flex-wrap: wrap and gap: 10px for responsive spacing
  • Include styling for the button (background color, padding, text decoration)

Implementation:

  • Add the CSS code to base.css or the theme’s custom CSS section
  • Solution targets Dawn theme or similar Shopify themes

Status: One community member provided CSS code; awaiting confirmation if solution resolves the issue.

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

Hi there I was hoping I could get some help in making rich text go side by side on mobile. https://petesrubbers.com/pages/diesel I

Screenshot 2025-03-10 090258.png
Screenshot 2025-03-10 090258.png641×434 58.3 KB

I would like for the button and the words to be side by side. Any help will be greatly appreciated.

2

hi @Rio_Omnis

Thanks for sharing your site. To make the button and the text appear side by side on mobile (like on the Diesel page), you’ll need to adjust the CSS for that section to use flexbox.

.text-button-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.text-button-row p {
  margin: 0;
}

.text-button-row .btn {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border: none;
}

If you’re using Dawn or a similar Shopify theme, you can add this CSS to base.css or use the “custom CSS” section in the theme editor if it’s available.