Need help centering to mobile items

[johnyct9760]

Hi there I’m working on the following page:

https://toothandnailgrooming.com/home/

And when I make the resolution of the front-end somewhere between a laptop and a mobile the top image on the page (that is for the mobile version of the site) is being pushed to the left edge of col, plz see screen attachment. - Screenshot 1

!

Also I am trying to get the mobile button to center, and it’s proving harder then I thought can you help me centering these 2 items thanks - Screenshot 2

!

[prakash_s]

Hello @johnyct9760,

Thanks for writing to us.

In order to set the image center in the column for the small devices, I would suggest you go to Column —> Flexbox—>Click on the Horizontal —>Now set it as the center for the small device.

For the mobile menu, I would suggest you add this custom CSS code under Theme Options—>CSS

@media(max-width:775.99px){
.masthead-inline .x-btn-navbar {
display: block;
float: none;
margin: 0 auto;
width: 45px;
}
a.x-brand.img {
float: none;
display: block;
margin: 15px auto;
text-align: center;
}
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks