Hi. I am using page builder to lay out content. If content is in a single row but two boxes then it does not stack on mobile devices as one would expect in a responsive page. Instead it just gets narrow. Is there a way to hide content on mobile only for divs? I know you can with images but how about a string like this:
div#panel-6997-2-0-0.panel.widget.widget_text.panel-first-child.panel-last-child
I have about 3 div areas on the home page and 1 on the contact page I would like to hide and they are all the first items in their row.
“I love what I do…”
“What I do when I don’t do ‘this’”
“BLOG”
On the contact page it holds the same position: the first item in the row which has some contact info and text.
+++ For the above: how does PageBulder play with a plugin for responsive columns. Is that an option? Which one would you use? Then I could just put the content into one single row and use the column short code but this is far from desirable or ideal.
My other related issue is on the blog archive page. I updated the CSS to make the image column and image larger and the text description area more narrow. Again, works great on the desktop but on mobile the text lays over the top of the feature images. I would be fine hiding featured thumbs on the archive page or blog page for mobile only but am not sure how to do this and give the text area the full width.
The final issue is that for some reason on the desktop my menu shows backwards of the priority order in the menu set up page. It would not be an issue to just list it backwards (which is what I am doing now) except I discovered that mobile shows the order correctly so now it is backward.
My site is still hidden so this is a preview url. If you can’t see everything let me know.
Thank you very much. Georgia
Hi Georgia
1. Check that Settings > SiteOrigin Page Builder > Responsive Layout is checked. It looks like that setting is un-checked right which is why containers aren’t collapsing.
2. You can try something like the following for your Blog archive page:
@media screen and (max-width: 1100px) { article.post.post-with-thumbnail-icon .entry-thumbnail, article.page.post-with-thumbnail-icon .entry-thumbnail { display: none; } article.post.post-with-thumbnail-icon .entry-main, article.page.post-with-thumbnail-icon .entry-main { width: 100% !important; float: none !important; } }3. I’ve seen the menu issue you’re describing once before I just forget the fix. Please run through a few steps:
1. Run any pending updates.
2. De-activate all plugins and re-check.
3. Try creating a new menu, assign to the theme’s primary position and re-check.
Hi. Not a lot of luck I’m afraid:
I did the following and there is no change
1. Run any pending updates.
2. De-activate all plugins and re-check.
3. Try creating a new menu, assign to the theme’s primary position and re-check.
I still have a reversed order menu and my columns are not collapsing. I did have and still have the responsive option checked.
The code for the blog post archive worked perfectly. Thank you!
I don’t know what happened but all is well now! Thank you again for your help. Please mark as resolved.
Best, Georgia
Resolved for the page layout… I will open the menu in a new thread. Thank you
For sure, glad to hear you made progress.