3 columns to 2 centered columns in mobile and tablet view

Support
#1

My website is www.auctionstoppers.com.

On the Contact page, I have created the How to Reach Us section with 3 columns (left column is right aligned and right column in left aligned). For the tablet and phone views, I have hidden the picture in column 2 and attempted to center align the text for column 1 and 3. It is only working for column 3, but I’m not sure what is needed to center column 1 too. What am I missing?

If there is a way to have the picture as well that would be great, but it was just taking up way too much space in the mobile views so I removed it. Any fix for that where it will look good (not just another stacked row)?

Also, once they are center aligned, is there a way to move the icons in the icon list in column 1 back to the left (so they look like the others in column 3) just for the mobile views?

Here’s the custom CSS I’ve added for these things:

.x-ul-icons.icon-on-right li [class*=“x-icon-”] {
float: right;
padding-left: 25px;
}

@media (max-width: 767px) {
.mobile-hide {
display:none!important;
}
}

@media (max-width: 767px) {
.page-id-19 #x-section-3 {
text-align: center;
}
}

Thank you in advance!

#2

I have since removed the mobile-hide CSS and switched to the regular image (rather than classic) in cornerstone and hid the image that way. Just an FYI.

Also, there is one other unrelated issue I can’t figure out. I have a fixed left header and all was well, but now the first menu link (Foreclosure) isn’t centered. The others are so I’m not sure why that is happening. I’ve gone through all the settings, and my CSS, that have anything to do with the header and menu, but nothing fixes it. I saw another post about the length of the word causing it, but the fix suggested didn’t work for me.

#3

Hello There,

Thanks for posting in! Regretfully we cannot check your site because it is under construction mode. Would you mind providing us some access to your site so that we can take a closer look?

Please create a secure note in one of your reply by adding the following info:

  • WordPress Login url
  • Username
  • Password

Thank you in advance.

#4

Thank you for your response. I have added a secure note with the requested info in the comment above.

#5

Hi There

Please replace your code with :

@media (min-width: 767px) {.
.x-ul-icons.icon-on-right li [class*="x-icon-"] {
float: right;
padding-left: 25px;
}}

@media (max-width: 767px) {
.mobile-hide {
display:none!important;
}	

.page-id-19 #x-section-3, .page-id-19 #x-section-3 .x-column.x-sm.cs-ta-right.x-1-3, .page-id-19 #x-section-3 .x-column.x-sm.cs-ta-right.x-1-3 li {
text-align: center !important;
}
.x-ul-icons.icon-on-right li [class*="x-icon-"] {
float: none;

}
}

Hope it helps!

#6

Yes, that worked. Thank you so much! Any assistance on the other unrelated issue would be appreciated as well.

#7

Hi There,

The issue is caused by the length of the word.

There are 3 ways to fix this.

  1. Increase the navbar’s width to 225. x > launch > options > header

  1. Decrease navbar’s font size. x > launch > options > header

  1. Decrease menu item’s left and right paddings. You can do that by adding this css in X > Launch > Options > CSS 
.x-navbar .desktop .x-nav > li > a {
    padding-left: 22px;
    padding-right: 22px;
}

Hope this helps.

Thanks.

#8

The CSS option is exactly what I was looking for and even helped me solve another issue that was driving me nuts (the text wrapping). Thank you so much for an awesome theme and support!!

#9

You’re most welcome!

1 Like
#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.