Mobile&Tablet design

Forgot to mention my website

Suggestit.in

Hi Sachin,

1.Try this CSS:

@media (max-width: 768px) {
.site-logo {
    position: absolute;
    left: 50%;
    transform: translatex(-50%);
    z-index: 999;
}

nav#mobile-menu-control-wrapper {
    margin-left: 0;
    justify-content: space-between;
    width: 100%;
}

button.menu-toggle {
    margin-right: auto;
    order: -1;
    flex-grow: 0;
}

.inside-header.grid-container {
    padding: 0;
}
}

2. Try this CSS:

.blog .inside-article, .archive .inside-article {
    border: 1px solid #000000;
    border-radius: 5px;
}

3. Go to customizer > layout > primary navigation, try to adjust the Navigation drop point.

Hi Ying,

Thanks, It can be done by CSS only or any alternative options available in the theme customisation.

Regards,
Sachin

It can only be done by CSS.

We would always try to provide solutions within the customizer options first, then CSS.

Hi Ying,

It is really very hard to explain everything on email.

I have implemented all the given CSS on my website but it is not giving the same result. If you open my website suggestit.in in mobile and click on hamburger button my logo also coming down with navigation menu.

I have applied below CSS for the boarder on post but it is not giving the same result I want
.blog .inside-article, .archive .inside-article {
border: 1px solid #000000;
border-radius: 5px;
}

Please provide solution or assign someone who can take care carefully hence request you to please cancel subscription and refund the money back to my source payment card.

Regards,
Sachin

Hi Sachin,

Can we please handle one question at a time?

We've had great success in your previous topic doing it that way:
https://generatepress.com/forums/topic/header-and-archive-page-design/

If you open my website suggestit.in in mobile and click on hamburger button my logo also coming down with navigation menu.

Let's take a step back. Remove Ying's CSS in #1 here:
https://generatepress.com/forums/topic/mobiletablet-design/#post-1894805

And activate the moile header option:
https://docs.generatepress.com/article/mobile-header/

Then I'll provide the CSS.

Please provide solution or assign someone who can take care carefully hence request you to please cancel subscription and refund the money back to my source payment card.

We are all trying to help - sometimes there is a bit of miscommunication. But as you can see from the previous topic, we were able to resolve numerous questions within one day.

Please try to not ask for a refund every time things don't go smoothly - your patience is appreciated.

Hey Leo, I was looking you since morning.

I have activated the mobile header as per you instruction.

We have multiple staff in the forum so it's not always me :)

Try this CSS:

@media (max-width: 768px) {
    .main-navigation.has-branding .menu-toggle, .main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
        order: 1;
    }
    .navigation-branding, .site-logo.mobile-header-logo {
        order: 2;
        margin-left: auto;
        margin-right: auto;
    }
    .main-navigation .menu-bar-items {
        order: 3;
    }
}

Okay, Understand.

It done

Let's come to second question which is boarder line in post for Mobile and remove earlier added separator from mobile version

Regards.
Sachin

Change this CSS:

.blog .content-area .site-main .post, .archive .content-area .site-main .post, .search .content-area .site-main .post {
    border-bottom: 1px solid #efefef;
}

to this:

@media (min-width: 769px) {
    .blog .content-area .site-main .post, .archive .content-area .site-main .post, .search .content-area .site-main .post {
        border-bottom: 1px solid #efefef;
    }
}

then add this:

@media (max-width: 768px) {
    .blog .content-area .site-main .post, .archive .content-area .site-main .post, .search .content-area .site-main .post {
        border: 1px solid #efefef;
        border-radius: 10px;
    }
}

Thanks Leo one more time.

01. Navigation bar disturbed in tablet mode. Screenshot: https://www.screencast.com/t/joJ6jaXJ How to fix it?

02. how to reduce space distance between boarder to featured image Screenshot: https://www.screencast.com/t/MhCStnYj

03.how to reduce space distance between navigation menu? Screen shot : https://www.screencast.com/t/s2ZIlKnHTF

04. how to design footer like this as i tried but it is not picking through widget area. Screenshot: https://www.screencast.com/t/6lsveaIcryIe

I need to complete all this task today. Looking for positive response once again

Regards,
Sachin

Hi there,

1. Setting the Navigation Drop Point option in Customize > Layout > Primary Navigation should fix this: https://docs.generatepress.com/article/navigation-drop-point/

2. Try the "Content Separator" option in Customize > Layout > Container.

3. This is the menu item height on mobile in Customize > Layout > Primary Navigation.

4. You can build this using our standard footer widget area. You just need to place your widgets in each area (there are 5 of them).

Hope this helps!

HI Tom, Sorry I didn't get any help with your solutions. My all above questions is still as it is.

Could you please connect to Leo as he really answer in very nice way.

01. You Suggested to change the breakpoint for hamburger button but I don't need hamburger button in Tablet mode. as I need tablet mode like this screen shot : https://www.screencast.com/t/n9SUBOgI2

02. When I tried your second solution it is applicable for both Mobile and Desktop mode but I want to customize only in mobile mode or Mobile mode and tablet mode differently.

03. When I come to reduce height of my Menu it also disturbing my logo which I don't need.

04. Yes I know there is the option of footer customization which is actually not working hence I asked for help.

Please connect to Leo for this, I think he is only a capable for to serve in best way.

Regards,
Sachin

Hi Sachin,

You Suggested to change the breakpoint for hamburger button but I don’t need hamburger button in Tablet mode. as I need tablet mode like this screen shot : https://www.screencast.com/t/n9SUBOgI2

I'm not sure what breakpoint you are using but your site is behaves the exact same way as the example site you've provided.

See the comparisons here:
iPad Pro: https://www.screencast.com/t/elOcAbRHb
iPad: https://www.screencast.com/t/nZOnS9ph