In today’s Community Answer video, I’m diving into a specific layout challenge sent in by one of our viewers. She’s building a pizza menu in WordPress and ran into a classic hurdle: a beautiful two-column desktop grid that becomes “squished” and hard to read on mobile devices.
Viewer’s Question from a different video: “I’m having an issue with a pizza page. I have a grid of 2 columns, the first is the name of the pizza, then the next column has 3 seperate paragraphs in it for each different size pizza. For example, [(Cheese) ($14 – $15 -$16)]. On the desktop, it looks great, but when I switch to mobile, everything gets squished together and is hard to understand with the sizes. Is there anyway to make it so the mobile version is just a smaller version of the desktop? Or do I have to rebuild everything?” – https://www.youtube.com/watch?v=_-nAAiKsh5s
🛠️ The Strategy: Logic Over Tools
Because it wasn’t mentioned which specific WordPress builder she’s using (like Gutenberg, Elementor, or Divi), I’m not demoing a “click-here” fix in a specific dashboard. Instead, we are looking at the underlying code and design logic of a live pizza menu theme to see exactly how professional layouts handle this transition.
You can take a look at this Pizza Restaurant WordPress theme here:
In this breakdown, we cover:
Breakpoint Basics:
12-column design settings switched from a 2-column “Large” view (6 columns wide) to a “Full Width” mobile view (12 columns wide).
Inside the Pricing Div: A look at how titles and prices are wrapped so they stay organized even when the screen gets narrow.
Using Google Inspect: A quick walkthrough on how to “peek under the hood” of any website to see why a layout is working (or why it isn’t!).🍕
Apply This Concept to Your Favorite WordPress Builder
Whether you use a block editor or a page builder, the principle is the same: you must change the column width based on the device. Once you understand the multicolumn logic, you can fix issues like this in any tool you choose.
#CommunityAnswer #WordPressLayout #ResponsiveDesign #WebDevelopment #DesignerToFullstack
_____________________________________________________________
*JOIN MY EMAIL LIST*
Love quick, helpful tutorials? You’ll love the emails too. 💌
*ABOUT ME*
Hello, world. I’m *Kelly Barkhurst* —an experienced Mac-based full-stack designer, educator, and entrepreneur passionately blending artistic vision and creativity with deep technical expertise.
With a BFA and MFA in Graphic Design and a certificate in Full-Stack Web Development, I’m uniquely positioned to work at this intersection of design and tech. My driving force is creating meaningful solutions and helping clients and students do the same.
*What’s Kelly’s superpower?* It’s using design thinking to strategically plan the BIG picture, then diving deep into the technical “weeds” to bring that vision to life—through beautiful visual design, compelling writing, or well-crafted, functional code.
*What brought you JOY today? *
👇 Share in the comments below
*SOCIALS*
https://twitter.com/@designer2fstack
https://www.facebook.com/designertofullstack
https://www.youtube.com/@UCWk0aZ-yFzCQX5bMLaISrog