Beta 4: Responsive Setup

Beta
#1

Q1: Layout responsive config

  • I made a Woo archive layout
  • I attempted to edit the two responsive layout break points
  • I made the first level 4 columns : but this displayed as 3 columns when in the front end
  • I tried to edit the other break points, but these generally wouldn’t change, some I could make 4, others stubbornly refused to edit.

i then found the Woo options in Theme Options which seems to override the row layout.

Overall I expected to define the grid / column layout of the Woo archive page within the page itself.

Q3: How do I change the text ‘Category Archive’? I really tried to find it but couldn’t.

#2

Hey, @BrandexPublishing!

Thanks for writing in! Regarding your responsive layout, I have tried setting things in the builder and they seem to be working as expected. One thing to keep in mind is depending on your screen size, you might not be seeing the same breakpoint in the preview that you might be setting in the controls. See the following:

5-xl
5-xl2880×1608 297 KB

Notice that on this screenshot from my computer the XL breakpoint is selected in the responsive picker (which is 1200px and up), but over in the workspace it shows the currently active breakpoint (denoted by the blue icon) as LG. This is because with the workspace present, it cuts into my screen real estate a bit and LG is technically the “largest” breakpoint I can see in the builder, while on the frontend I can actually see XL. All this to say, it’s just important to ensure that you’re actually editing the proper breakpoint by selecting the appropriate breakpoint tab in the workspace when working on layouts. I’ve created the following selections as well in the builder, which all appear to be working:

4-lg
4-lg2880×1606 321 KB

3-md
3-md2880×1606 220 KB

2-sm
2-sm2880×1606 216 KB

1-xs
1-xs2880×1606 298 KB

I have confirmed that these are all working on the frontend as I have set them in the builder. If there is something else specifically you are referencing that I’m not touching on here, please feel free to provide some more details so I can look into this more thoroughly for you. You should absolutely be able to define the layout structure of your archives within the page itself. If you start from a completely blank page, you can use one of our Starter Templates, which feature layouts I’ve created using our native Elements in the builder that you can tweak.

As for the “Category Archive” text, where are you seeing that so I can help direct you?

#3

I made a video of the weirdness. I’m clicking the options for columns, the actual preview updates but the settings icons don’t change. See if you can see what I mean in this:

#4

Thanks for that, @BrandexPublishing! That was very helpful. More Safari bugs…looks like this is one that I’m finding issues on dating back to 2015. It’s something Safari needs to fix with how they handle some styling things I was doing to pass colors around using currentColor from the parent, but…who knows when that will happen. Haha. I had to re-write the CSS a bit…it’s a little more verbose now, but at least it’s providing the visual feedback and working everywhere.

Thanks!