How to define element width by header width?

  • michalrama

    (@michalrama)


    4 years, 4 months ago

    Hello,

    I added toogle on the page. The problem is its width and position. Its width can be defined using this code.

    $("div.elementor-widget-container").css("width", "400px");

    However, I need the width to be the same as the header width, including the left and right margins. But mainly to change as the width of the browser window changes, just as the header does.

    On the arbela.cz/price-list website, this is exactly how I would like it.

    How do I define it with code, please?

    Thank you

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • corrinarusso

    (@corrinarusso)

    4 years, 4 months ago

    Have you been working on this issue for a while using a lot of trial and error?
    You’re css markup is packed with all sort of max-width and width and media screen calls.
    It’s making it very hard to sort out.

    Your main container is setup to work within a max-width of 768px:
    https://postimg.cc/3WmSpLmn
    but the media screen is not functioning properly.

    Also, the header of the page is actually inside the article block:
    https://postimg.cc/D8gKQfLj

    I’m snore sure – it’s very messey.
    Try starting over with a clean slte of a page, or new theme.
    Use a page template with No Header / No Footer.
    Just get the basics down for your toggle first.

    Thread Starter michalrama

    (@michalrama)

    4 years, 4 months ago

    Hello,

    Have you been working on this issue for a while using a lot of trial and error?
    You’re css markup is packed with all sort of max-width and width and media screen calls.
    It’s making it very hard to sort out.

    I have little of my own CSS code (I just rearranged the flags in the header and removed the big space below the header). Otherwise, all code is related to the theme and plugins.

    Your main container is setup to work within a max-width of 768px:
    https://postimg.cc/3WmSpLmn
    but the media screen is not functioning properly.

    768px is the minimum container width that you can set in the theme used (Zakra)

    Otherwise, the content of the page is related to the Elementor plugin. I use it to add toogle.

    Also, the header of the page is actually inside the article block:
    https://postimg.cc/D8gKQfLj

    I only hid this element because it creates too much space at the top. However, it is clear from the elements that it is related to the Elementor plugin (I have no idea why it does so)

    I’m snore sure – it’s very messey.
    Try starting over with a clean slte of a page, or new theme.
    Use a page template with No Header / No Footer.
    Just get the basics down for your toggle first.

    I’m sorry, I just want to test it. And I didn’t understand the definition of a header style and how to apply it to an element (width and position)

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘How to define element width by header width?’ is closed to new replies.