Spacing between columns for desktop and mobile

  • Resolved paulpetch

    (@paulpetch)


    3 years, 10 months ago

    Hey Nick,

    I’ve removed some bloated plugins from my site https://christchurchphotographer.co.nz/info-and-contact/ and opted to use your wonderful plugin instead for adding text and columns.

    I’ve added the copy to https://christchurchphotographer.co.nz/info-and-contact/ and as you can see it needs some spacing between the columns- and less on the left side contains the image of me!

    On mobile its a single column- I like that. But the issue of spacing left and right continues and the text is right up to the edge of the device.

    How do I fix these issues? Ive added some CSS as suggested in other posts here- but it does not seem to work. I am a complete novice.

    Ive got an identical site using the original “WP Bakery” plugin and the layout there is indicative of my goals. https://paulpetch.co.nz/contact-photographer-paul-petch/ – Also on a mobile.

    Also, when you you click on “documentation” from the plugin dashboard it links to your site but is a 404. Just thought i’d let you know.

    Thanks,
    Paul

    • This topic was modified 3 years, 10 months ago by paulpetch.
    • This topic was modified 3 years, 10 months ago by paulpetch.
    • This topic was modified 3 years, 10 months ago by paulpetch.
    • This topic was modified 3 years, 10 months ago by paulpetch.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Hi Paul,

    I just reviewed your site and the plugin is working as intended. However, the plugin adds very simple layout elements, basically just the given number of columns and that is it. All additional styling needs to be accomplished by the CSS in your theme or manual CSS added to the column shortcodes.

    In looking at the site, there does appear to be ample spacing between the text and the image of yourself. Perhaps you adjusted the layout since writing the ticket?

    Concerning the lack of padding on mobile, it appears that your theme does not have any mobile padding on the entry-content div. In that case, you can add it yourself to the column element by wrapping your columns in one of the utility shortcodes that comes with this plugin, the columns-container. It could look something like this:

    [columns-container style="padding: 0 20px"]

[one-third-first] …Column Content… [/one-third-first]
[one-third] …Column Content…[ /one-third]
[one-third] …Column Content…[ /one-third]

[/columns-container]

    Also thanks for the note about the documentation link. I will get that updated. In the meantime, checkout the FAQs for more info on the utility shortcodes and how to add attributes to individual columns.

    Finally, given that you are using this plugin, I assume that you are using the Classic Editor on your theme? The Classic Editor is serviceable, but I do encourage you to checkout the Gutenberg Block editor. This is the main editor in WordPress if you are using version 5.0+. With new WordPress editor, this layout would be super simple and you wouldn’t need a third-party plugin ??

    All the best,
    Nick

    Thread Starter paulpetch

    (@paulpetch)

    Thanks Nick. That helped to fix the issue on mobile. With regards to the spacing between columns, I fixed it by adding 3 columns and only using two.

    For some reason the code you suggested required a “px” infront of the “0” to make it work for me. Odd. Fixed now though.

    Thank you.

    p.s. Classic editor for lyyyyyyyyyyyyfe ??

    • This reply was modified 3 years, 10 months ago by paulpetch.
    Thread Starter paulpetch

    (@paulpetch)

    Hey, I’m still having issue with padding. If you visit https://outdoorphotography.co.nz/testimonials/ you can see the text in the centre is pretty much touching. What do I add to add more spacing to the centre please?

    THANK YOU! ??

    PAUL

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Spacing between columns for desktop and mobile’ is closed to new replies.