Suggestions for how to get content to align responsively

Love the theme – thanks for the strong support you all provide!

I am implementing a design produced by a designer and although I have been able to hack together a formatting solution for one aspect of the design using inline CSS, it doesn’t work super well from a responsive standpoint. I am looking for suggestions on how to better utilize the theme’s capabilities to accomplish the design goal, and failing that, interested in other suggestions.

The branding for our church uses a gold backslash in the logo and throughout the website. Below you can see the was the designed uses the slash to highlight some text that looks like a pull quote. Getting the text to float to the right of the backslash (which I currently have as an svg) and be centered horizontally was hard to do and although it’s working, responsiveness is a challenge. (i.e. at some display widths, the text is not centered horizontally b/c the image size is unchanging but the text height grows as the display width shrinks.) I’m wondering if there’s some container type of solution available in the theme that I could use to ensure that the slash and the text are always on the same line and the text is always horizontally centered to the right of the slash. I have not been successful trying to get this to work with the grid control, but am interested in opinions of people who understand the theme better than me. Here’s an example of it looking the way we want:

https://seraleightable.flywheelstaging.com/southeast-raleigh-table-home/about-us/

Here’s the same view when on a narrow mobile device resolution:

The nasty inline css I used to get this to render looks like this:

<p><img src="https://seraleightable.flywheelstaging.com/wp-content/uploads/2022/03/AboutUsSlash.svg" alt="" width="82" height="171" class="alignnone size-full wp-image-752" role="img" style="float: left; margin-right: 1em;" /></p><p style="padding: 1em;">What if when Jesus said we can have life “more abundantly,” he meant it? What if, in those tiny dashes between the dates marking our births and deaths, dwells a life marked by glory and to know a world shaped by grace? The Southeast Raleigh Table believes this life-giving life is here-and-now and we want everyone to experience it.</p>

I’ll add a comment with credentials in case it’s helpful to be able to look at the implementation. Thanks for any advice you can offer.

Hey @jptsetme,

I’d recommend you put the Image and the inside a Div element. That way, you’ll have the Flexbox option under the Design options. You can learn more about Flex layout here: https://theme.co/docs/use-flex-layout

Hope that helps.

Thanks for your help!

I went to check this out, but the Edit With Pro link has disappeared from all my pages (both in the Pro menu on the pages themselves and in the Pages list.) I realize I am running a very old version of the theme, but once we go live I will be able to have reliable backups and will upgrade. Any advice on how to get this menu back for now?

Thanks!

Hello @jptsetme,

Please make sure that you have enabled the Page Editing with Cornerstone. Go to Cornerstone > Settings > Permissions > General.

If you are using an older theme, you may not be able to see the menu like this:

Hope this helps.

I’m using Pro, and Page editing is enabled in permissions for my role. This option used to appear (for the last year), but disappeared after I asked my question in this forum post. Creds for accessing the site are listed above.

I did find a workaround where I can go to Pro -> Content and then find my page in the sidebar list of pages and edit it from there. But the “Edit with Pro” menu on the page itself is much easier to navigate from the site itself to the editor. Any idea what changed and how to fix it?

Hi @jptsetme,

Glad that you are able to find a workaround, but you are using the older version of Pro i.e. 3.2.3 and that is why the options shown by my colleague are not showing at your end. I would suggest you update the Pro to its latest version i.e. 5.1.5 and get options. Please remember that you are using a much older version, I would suggest you please copy your live site to a staging server and update the Pro in staging. And if everything works fine in the staging migrate the staging server to live.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.