A few mobile CSS tweak requests

Support
#1

Hello,

I was hoping you could help me make a few CSS customizations related to views on mobile devices.

Issue #1: When I use the protected content shortcode as shown on the following page, on mobile devices, the “Login” button is flush against a “section” shortcode additional element I added below that. Is there a way to add some padding between these elements on a mobile device?

https://nnnpropertiesgroup.com/registration/ ->

Issue #2: Is there a way to add padding between the call to action button and the circular images on the following page? This only seems to be an issue on mobile devices.

https://nnnpropertiesgroup.com/about/ ->

Issue #3: On the following page, on mobile devices only, you can see a light grey area between the iframe element and the dark grey footer. Is there a way to make the iframe element flush with the footer on mobile devices?

https://nnnpropertiesgroup.com/exclusive-opportunities/ ->

Issue #4: Is there a way to decrease the padding on the left and right side of the logos on the following page so there is less grey space on each side, as well as to make the logos larger?

https://nnnpropertiesgroup.com/client-resources/featured-tenant-profiles/ ->

Thanks a lot, and Happy Thanksgiving!

#2

Hi There,

Thank you for writing in, for the 1, 2, and 4, please add this to Theme Options > CSS

@media (max-width: 767px) {
	.mobile-bottom-margin {
		margin-bottom: 4em !important;
	}
	.mobile-side-padding {
		padding-right: 10px !important;
		padding-left: 10px !important;
	}
}

Feel free to adjust those values.

Then apply the CLASS mobile-bottom-margin to the button that you’re having spacing issue,
and (4) apply the CLASS mobile-side-padding to the ROW with too much padding on mobile.

For number 3, please add this to Theme Options > CSS

#buildout + p {
	display: none;
}

Hope it helps,
Cheers!

#3

Hello,

Thank you very much for your reply. Unfortunately, Only the final suggestion (aka “number 3”) seemed to work. I have tried deleting the cache on my site, but I didn’t notice any changes. Could you take one more look for me? Thanks very much for your help!

#4

Hi,

I checked and it works.

Please see video below.

Have a great day! :slight_smile:

#5

Strange, because it’s definitely not working for me. I am using Google Chrome via an iPhone 6+ .

#6

Hello @gignnn,

Please clear browser cache when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Thanks.

#7

I did that. I have cleared my browser cache, my CDN cache and hosting cache, and the problems still persist. Please see the attached screenshots.

Is there a conflict with other CSS code perhaps?

#8

Hi again,

I checked your pages and I see you have not added the class mobile-bottom-margin and mobile-side-padding to the suggested elements that’s why the CSS isn’t working for you. Make sure to assign those classes suggested by @friech here https://theme.co/apex/forum/t/a-few-mobile-css-tweak-requests/47953/2

However you can also try an alternative approach:

  • For the protected content, you can add the following code in the Theme Options > CSS: 
.x-btn-protect {
    margin-bottom: 20px !important;
}
  • To add padding between the call to action button and the circular images here https://nnnpropertiesgroup.com/about/, simply inspect your columns in Cornerstone and add the bottom padding to the columns (see screenshot)

Hope this helps!

#9

Thank you. I have resolved all of the issues except for the last one. Unfortunately, I am a longtime user of X and learned how to navigate your theme back in the days before Cornerstone became so popular. Thus, a lot of my code consists of old shortcode that has been replaced today within the current theme via Cornerstone, which I don’t use. I would effectively have to rebuild my entire site from scratch, page by page, in order to eliminate this issue.

Thus, could you please show me how to make these changes using traditional CSS? Again, I am referencing Issue #4 from my original post regarding the tenant logos, which are currently way too small on mobile devices. Ideally, I’d like to not only reduce the padding between the squares and the left and right margins, but also reduce the padding between the images and the borders of each square so that the logos appear larger.

I appreciate your help.

#10

Hi There,

For the #4 issue, please add this element CSS to your row:

$el {
   padding: 0 15px !important;
}

Hope it helps :slight_smile:

#11

I’m sorry, but where am I placing that? I only want this effect in a mobile view. Please see the screenshot below:

There are two things I am looking to accomplish on mobile devices:

(1) I want to reduce the grey space between the content and the edge of the screen.
(2) I want to increase the size of the logos located within the squares.

If you can provide me with the exact code I would need to dump into my custom CSS dashboard, that would be excellent. Thanks for your help!

#12

Hello @gignnn,

Since you are using a classic section elements, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media(max-width: 767px){
    #x-section-2 > .x-container{
        padding: 20px !important;
    }
}

The padding should be reduced and the image logos will become bigger.

#13

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