Docs

[ldollard]

This is the url.

The menu is fine on desktop, but when the screen is shrunk on tablets or mobile or even if you manually shrink the browser on the desktop the menu is either too far to the left or on mobile is completely gone.

Can you please help with this.

This is the URL http://amdserverpac.com/

It is login protected so login details on next post if needed.

[ldollard]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in! This issue occurred because you have added a custom css. Please update your css and use this instead:

.x-navbar-wrap {
    padding-left: 20px;
    width: 1220px;
}

@media(max-width: 979px){
  .x-navbar-wrap {
    width: auto !important;
  }
}

And I also see this code which needs some update.

.page-id-7 .entry-wrap {
    padding-left: 100px;
    padding-right: 100px;

}

You need to use this instead:

@media(min-width: 980px){
  .page-id-7 .entry-wrap {
    padding-left: 100px;
    padding-right: 100px;
  }
}

We would loved to know if this has work for you. Thank you.

[ldollard]

Honestly it didn’t I instead removed my css and created different @media at the bottom for the various pages.

Thanks for pointing me in the right direction though.

[Rad]

You’re welcome!

[ldollard]

This reply has been marked as private.

[Rad]

Hi there,

Unfortunately, that’s how columns and rows work together when to break to the single column.

Left-most goes on top, right-most will be on the bottom. And since the title is on same single row, then they stack together on mobile.

Have you tried block grid?

Thanks!

[ldollard]

No is that part of cornerstone?

[Lely]

Hi There,

Yes, Block grid is available element on Cornerstone. See attached screenshot.
If you want to use shortcode, see this:http://demo.theme.co/renew-1/shortcodes/block-grid/

Hope this helps.

[ldollard]

can you then control in which order the block display in mobile?

[ldollard]

also how can i center my logo in mobile {x-brand img}

http://amdserverpac.com/schedule/

its on the right, but no matter what i do i cannot center or left align it.

[Lely]

Hi There,

Unfortunately, block grid responsive nature is the same with columns. If you have different order on mobile view, it would be better to use the HIDDEN BASED ON SCREEN property. It is available on both sections and rows. What we can do is Hide your default content on mobile view. Then create another content on mobile view with your preferred order and then hide this on dekstop view.

To center the logo. please update this custom CSS:

@media (max-width: 979px){
.x-brand img {
    width: 100%;
    position: absolute;
    top: 20px;
}
}

To this:

@media (max-width: 979px){
.x-brand img {
    width: 100%;
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
}
}

Hope this helps.

[ldollard]

Lely, thanks so much for your help that worked perfectly.

can you tell me exactly what:

left: 0;
right: 0;

is applying to? is that essentially taking space away from all padding and margins, as i tried that myself and it didn’t work, so interested to know what that specific css does. thanks so much

[Rupok]

Hi there,

This is to make sure the image is centered. You can still use padding there if you need.

Cheers!

[ldollard]

Your reply times the last few days have been on fire. thanks so much guys. I’ve learnt so much from you, but fear not i’m taking a college course on web and css now. lol

[Author]

Posts