I trying to position second zone label more on left. My css is following:

lpac-map-container > div.lpac-map > div > div.gm-style > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(4) > div:nth-child(2) > div > div {

#lpac-map-container > div.lpac-map > div > div.gm-style > div:nth-child(1) > div:nth-child(2) > div > div:nth-child(4) > div:nth-child(2) > div > div {

	right: 150px !important;
}

}

It woks, but as soon as you zoon, this zoom 2 label goes with zoom. So it overlaps Zone 1 label. See 8 zoom level screenshot: https://prnt.sc/S3d94s2RAJuD

And zoom level 12 (or something): https://prnt.sc/3Rn4Ttk9pIMF

So my question is – is it possible somehow fix Zone2 label in each zoom level?

I’m trying to create a page with multiple animations over a background image, that move as you scroll down the page. So the width would be 100% of the image, and you see the rest of the image as you scroll down the page.

However, I am having so much trouble just getting the background right that I have removed all the animations until I can get the background positioned properly.

I need the bottom of the image to show so that it’s clearly a book. Hence I have the image positioned 100% from the top (with the white dot you can grab at the very bottom of the the thumb where you choose position).

I’ve created a Greenshift container block and set the background to my background image. The only other blocks are a few spacers, just so the container isn’t empty. Here are the failed steps I’ve taken.

1. Width 100% sets the width correctly, but crops the rest of the image (same with Initial, Cover or Auto). However, if I set it to Contain, it contains the entire image above the fold, no scrolling.
2. From there I tried adding height, width still set to 100%.
   • Height 100% does nothing, still cropping the image.
   • Setting the height to 460vh is the closest I’ve gotten, but this still crops the sides of the image, even with width at 100% or vw. If I set the view-height any higher than this, it creates empty space at the top or bottom of the block.
3. I also tried setting the background to contain. I can get this looking perfect on my screen with 100vw and 200vh, but when I resize the screen it creates a big gap of empty space (which I don’t understand because I thought using view height was supposed to be adaptive).

I’m so frustrated at this point, going in circles for weeks so I finally decided to write in. Any idea what I am doing wrong here or what I might try next?

I’m working on making my site responsive across all devices, but i’m having extra trouble on laptops…

So when I am working on the site on my desktop with a widescreen monitor, and I am on the laptop custom breakpoint in the Elementor editor, everything looks perfectly fine (video linked showing this). This video shows me working on the editor from my desktop computer. You can see that the text in the first section looks fine on the laptop breakpoint here

But when I am working in the editor on my laptop or even viewing the site on a laptop, the text paragraph on my hero is pushed to the left (video attached showing this). This is on multiple laptop devices. The laptop custom breakpoint on Elementor is from 1201 px to 1366 px. This issue typically occurs when the screen size is between 1367px and 1880px (linking a video showing this). But the minimum size for the desktop breakpoint is 2232px I believe. That means there are devices between the Elementor Desktop and Laptop breakpoints that are not accounted for. In the second video linked i’m working on the editor but this time on my actual laptop computer. You can see the text goes out of place when at 1366px even though it was just fine when I was working on it on a desktop (first video linked)

I’m just so confused, I seem to have trouble with responsiveness mainly for laptops. Does anyone have any suggestions? Like is there a way to add my own custom breakpoint between the Desktop and Laptop breakpoints?

Link to site

Here is a link to a screen recording so you’ll know what I’m talking about:

For context I have the blue abstract shape as a background image on the first section, then I used negative bottom margin to bring the second ‘About me’ section up right below it…My goal is to have the About me paragraph lined up with the “point and line” of the shape (which it IS on the default screen widths across widescreen and mobile). But if you change the horizontal width of the browser window the paragraph goes far out of position.

I don’t at all expect it to be EXACTLY where it needs to be during a transition, but I was wondering if there is a way so that it doesn’t go TOO far off from position? I am on Elementor Pro btw

I hope this email finds you well. I’ve been using the WP Mobile Menu plugin on my website and am highly satisfied with its performance and features. However, I’ve encountered a layout issue that I’d like to address.

In the mobile view of my site, the mobile menu provided by WP Mobile Menu is currently positioned above my site’s header. I would like to modify this so that the mobile menu icon seamlessly integrates with the other elements of my header.

Specifically, I’d like to achieve the following layout:

• The mobile menu icon on the left.
• My site’s logo in the center.
• The search and cart options on the right.

Is it possible to adjust the mobile menu’s position in this manner? If so, could you please provide some guidance or direct me to relevant resources or documentation that can help?

Your assistance would be greatly appreciated, as achieving this layout would greatly enhance the user experience for mobile visitors on my site.

Thank you for your time and support.

Warm regards