Difficulties fixing the image sizes, placement, and off-canvas menu

1. Which image are we talking about?

2. The setting is at customizer > layout > Off Canvas Panel > Desktop Toggle Label.

3. We can help point you in the right direction, but we can't provide a full custom solution in this forum.
Please refer to the support scope article: https://generatepress.com/what-support-includes/

This image from the homepage, for example https://ibb.co/09w4CbY, how can I declare a different size and position for the mobile version without affecting the desktop version ? I want this to be smaller and placed at the top like on my reference.

Same with the offcanvas menu, the menu that I created for the desktop version doesn't look good on the mobile version. How do I call its div class so I can create another css for the mobile version.

Hi Karl,

With regards to the image, to put it on top, you can set the view to mobile, and set the order of the Container Block within the Grid Block as such: https://share.getcloudapp.com/v1uO28Az

By default, the value of order is 0, and setting it to -1 should put it on top.

With regards to its size, one thing you could do is to increase the padding of the Container Block on mobile as such: https://share.getcloudapp.com/4gur9p7n

With regards to the Off Canvas menu, it seems that your offcanvas menu isn’t working on mobile. You're CSS is causing it to disappear. It's the margin-left causing this.

.main-navigation.offside {
    display: flex;
    top: 10vh;
    flex-direction: column;
    justify-content: center;
    width: 350px;
    height: 70vh;
    padding: 20px;
    transition: transform .7s;
    color: white;
    background: rgba(0, 0, 0, .7);
    margin-left: 800px;
}

Should be something like this instead if you want it to appear:

.main-navigation.offside {
    display: flex;
    top: 10vh;
    flex-direction: column;
    justify-content: center;
    width: 350px;
    height: 70vh;
    padding: 20px;
    transition: transform .7s;
    color: white;
    background: rgba(0, 0, 0, .7);
}

@media (min-width: 1025px) {
    .main-navigation.offside {
        margin-left: 800px;
    }
}

You're using the right selector. You'll just need to make it responsive.

Hope this helps!

Hi Fernando

Thank you for the really helpful guide.

There is one more problem that I find difficult in the off-canvas menu. Currently, the off-canvas menu looks good on my desktop but not on mobile and other small devices. Whenever I make an adjustment it affects the desktop version. I'm thinking, instead of setting its left margin to make it appear centered, which affects the other devices, is there any other way to make it auto-float center on whatever device used?

.slideout-navigation.do-overlay .inside-navigation .main-nav {
    padding-top: 50px;
}

.main-navigation.offside{
    height: auto;
		width: 300px;
    display: flex;
    top: 15vh;
    flex-direction: column;
    justify-content: center;
    transition: transform .7s;
    color: white;
    background: rgba(0, 0, 0, .9);
}
@media (min-width: 1025px) {
    .main-navigation.offside {
      margin-left: 800px;

    }
}

I see.

You can try adding this CSS to position the Offcanvas menu in the center on Mobile and Tablet:

@media (max-width: 1024px) {
    .main-navigation.offside {
        left:50%;
        transform: translateX(-50%);
    }
}

You may alter the 50% value of the left CSS rule if you want to move it a bit to the left or the right.

Hope this helps!