Mobile rendering of a site built with GenerateBlocks versus Elementor

Hi Mark,

Is there a way to make both the DESKTOP and MOBILE versions of block-based and Elementor-based sites look the same?

It really depends on how the block's appearance differ on the viewports.

If it's just simple difference in font size and paddings then this could be simply fixed by changing it on the sidebar setting the block editor.

If it's something major, beyond the scope of the sidebar settings, then that would require custom CSS.

That said, if you can provide us the reference elementor-based section of the site and the block-based section of the site to apply things to, we can figure out the write-up to make things match as much as possible.

Elvin,

For starters, I would just like the homepage image (and overplayed text) to look the same on the block-based site as it does on the Elementor-based site.

I have provided the temporary logins for both sites in the private area.

Thanks,
Mark

Elvin,

To be even more specific, I noticed that the mobile view (in landscape mode) especially didn't match up between the block-based site (at generatepress.michianait.net) and the Elementor-based site (hardyness.com).

Mark

Elvin,

Another thing I noticed: I had to use CSS to get the logo to be far left on the home screen (on the DESKTOP version of the block-based site (generatepress.michianait.net), while on the Elementor-based (hardyness.com) site, the logo position was easily moved to the left (maybe just using the Customizer).

Thanks again for your help,

Mark

Hi there,

before getting into the details ... are you going to want to replicate your existing site ? If so - trying to convert a GP Site to make it look the same is probably going to be much harder then beginning from scratch - let me know.

David, I actually am trying to do it from scratch - just having trouble getting them to look alike, especially in landscape mobile view.

Mark

Sorry my bad, i saw the Donate site had been installed on your new site.

First thing to address is the different Header layout. So the Site Logo and Nav occupy the same space.
To replicate the original site:

1. Customizer > Layout > Header and Enable Navigation as Header and Disable Mobile Header
2. > Layout > Primary Nav and adjust the Menu Item Height until the logo on desktop and mobile views are correct.

Once thats done we can look at the Container Block settings for the hero.

Hi David,

I have performed steps (1) and (2) above, not totally successful though. The header on my phone has a very small logo, not like it is on desktop. Also, I had to set the setting to make to mobile menu use the same as the (Main Menu) on desktop. I thought there would be a way to have the mobile menu automatically have the same menu as desktop.

Thanks for your continuing help.

Mark

URL: generatepress.michianait.net

If you go back to the > Layout > Primary Nav and change the customizer view to Mobile - then increase the Menu Item Lineheight - this will increase the logo size for mobile.

David,

Thanks for the logo fantasize (on mobile) tip.

I have used the following CSS that you provided for another site to reverse the mobile stacking order of the logo and menu:

@media (max-width: 768px) {
.inside-header {
display: flex;
flex-direction: column-reverse;
}
}

However, when I put that in (as it is now), the hamburger menu is left justified instead of centered. Do I need CSS to center the mobile menu, or is there a customizer setting for it?

I am also trying to decrease the gap between the logo and the site title, both on desktop and mobile.

Thanks again,

Mark

generatepress.michianait.net

David.

I haven’t heard back from you in a whle. Did i drop the ball, or was supposed to send you something?

Mark

Sorry Mark you're previous reply slipped through our system.
So two things:

1. In Customizer > Layout > Primary Navigation you can change the Inner Width to Full
2. IN Customizer > Additional CSS - delete this:

.site-logo {
    margin-left: 50px;
    margin-top: 10px;
}

Hi David,

Thanks for getting back to me. That tip reduced the gap. However, as I mentioned before, I am still trying to get the (logo and site title combination) to be on top and the menu to be below it (and all of this centered) on mobile. I tried using your previous CSS snippet:

@media (max-width: 768px) {
.inside-header {
display: flex;
flex-direction: column-reverse;
}
}

but it didn't help.

Mark

Is this different to the original site design ?
If so to clarify you want the the elements stacked:

Logo
Site Title
Hamburger Menu

Is that correct ?