Make adjustments per screen size (Mobile)

Hi,

Please describe your issue in details and provide screen-shot explaining your need.

Thanks.

These questions are all for the MOBILE side only. The desktop works fine and I would not like to change those setting.

Website: https://www.thesocketroll.com

1) On all the pages with text the words seem to be squished to the left. Is there a way to center them so they look correct and take up the entire page?

2) On the ‘Products” page the diamonds where I make bullet points change from blue (desktop version) to red (mobile version). They should stay blue.

3) On the ‘Products” page the “Paypal” button is missing. This is extremely important for obvious reasons.

4) On the ‘Products” page the images of other tool companies, craftsman, snap on, mac etc. is squished and cut off to the right side.

Thanks for your help.

Hi,

1) Please add below CSS in Custom CSS editor.

.navbar-header {
  text-align: center;
}
.navbar-toggle {
    float: none !important;
 }
.navbar-toggle:hover {
    float: none !important;
 }

.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color:rgba(0, 6, 102, 1) !important;
}

Save the changes.

And all other issues are related to plugin, please raise your issue on particular plugin support forum.

Thanks.

The only thing is that when you tap the menu in the MOBILE version the tabs start off on the left and then jump to the center. Is there a way to prevent that from happening so they are just in the center without the jump?

Everything else is GREAT! Thanks.

Hi,

Please add below CSS in custom CSS editor.

@media (max-width:767px){
.nav.navbar-nav {
  text-align: left !important;
}
}

Save the changes.

Thanks

That didn’t work. The drop down menu pages start off on the left and jump to the center. I just want them to be in the center from the start.

Hi..

Please replace this code

@media (max-width:767px){
.nav.navbar-nav {
  text-align: left  !important;
}
}

with this code

@media (max-width:767px){
.nav.navbar-nav {
  text-align: center !important;
}
}

Save the changes.

Thanks.

Still does the same thing

Any other code on this one?

Hi,

Please add below CSS in Custom CSS editor

.collapsing{
text-align:center !important;
}

Save the changes.

Thanks.

OK. Thanks!

Most Welcome.

Thanks.

Actually, something else came up. When I check the website on my iPad the navbar menu pages look all goos EXCEPT for the ‘Products” page which is under the home page in LANDSCAPE mode and when you turn it to the regular direction (vertically) there are two lines of menu pages. Please advise. Thanks.

Hi..

Please copy below css code into custom css editor.

@media (min-width: 981px){
.navbar-default .navbar-nav li a {
    padding: 0px 20px 0px !important;
}}

@media (max-width: 768px){
.navbar-default .navbar-nav li a {
    padding:  13px !important;
}}

Save the changes.

Thanks.