Section columns forced 100% width on mobile

  • Resolved misabby

    (@misabby)


    2 years, 5 months ago

    Website: [ redundant link removed ]
    Theme: Hello Elementor
    Issue: The “Shop Menu” menu item drop downs pull page content to make the “mega menu” (done with the Elementskit plugin that has elementor add-ons). So the menu items essentially pull up a page on hover in which i have Elementor sections/columns to build its structure. The sections are filled with a header, product categories list (list is created using the Woolentor plugin, another elementor add-on plugin, since the elementor categories list doesn’t pull from the products query) and some photos. On desktop and mobile, whatever width % I set the columns, it shows on the front end pretty much exactly how i set everything on the Elementor WYSIWYG editor. But when it’s mobile it shows correctly on the editor, but on the front end they all go full width. So instead of the columns being side-by-side, they’re on top of each other. I am just trying to figure out what I need to change to force the smaller widths so they’re side by side. I cant seem to find the right selector element via the inspection tools on the browser to add custom css, which is usually how i fix problems like these when I’ve tried every one of the input options on the plugin/theme options

    I dont think it’s a plugin conflict. My website was built importing an elements kit, using the hello elementor theme and using the 2 plugins listed above for additional elementor widget add-ons. I dont know if the categories list styling could force anything full width or what. I’ve done the whole disable all other plugins to see if it’d change anything but it doesnt.

    how it looks on the backend with the editor and how I expect it to look upon navigating the website: https://daydreamfurnishings.com/wp-content/uploads/2022/06/backend.png

    how it’s actually showing on the frontend: https://daydreamfurnishings.com/wp-content/uploads/2022/06/frontend.png

    I’m really only working on the “Living room” drop down and once i get that one in order, use it as the standard/template for the other ones. so the other drop down styles are not accurate for the endgame.

    • This topic was modified 2 years, 5 months ago by Jan Dembowski.

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter misabby

    (@misabby)

    So i figured out a solution when i duplicated the section to see if i made the columns 50%, 50%, 50%, 50% (so it’d be 2 columns and 2 widths), if that would at least show. something about adding a section below made my previous section show correctly. So i just added a blank section under and it’s now showing correctly!

    Thread Starter misabby

    (@misabby)

    My solution is also very finicky. I have to add 2 blank sections at the bottom for it to work. If i change anything, I have to save it…remove the sections from the bottom, add new sections, then save it. otherwise for some reason it reverts back to the 100$ column widths if i just edit, save and leave it at that.

    Hi,

    Elementor displays all the widgets including default WP and third-party widgets. They are separated by section Headings in the widget area.

    However, we can provide support only for those that we create, we are not aware of the third-party widgets code and functionality (We created Elementor Core and Elementor Pro).

    I’m glad to hear that you have solved this issue:)

    However, This is a good question for the plugin’s support team. So please consider writing to them.

    Thread Starter misabby

    (@misabby)

    Okay so i actually found the REAL solution because that other one was too finicky for me and it required a whole step of things if i ever made a change. I started looking into if anything was overriding the Elementor CSS or anything based on the previous comment received. Turns out in Elementor > Settings “Disable Default Colors” and “Disable default fonts” was selected to Elementor does NOT override other CSS. I unchecked them and everything was displaying exactly as it should. So i was right that I didn’t think it was another plugin making a conflict, but i guess I may have selected that option with elementor when i first added it as a precaution to not have too much CSS files and conflicting files loading up at once, all for my needs being that elementor CSS *should* be utilized and it’ll override as the primary styles

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Section columns forced 100% width on mobile’ is closed to new replies.