Topic: 132 / Width of promo element on mobile

Tagged: x

Author

Posts
June 19, 2016 at 9:48 am #1049276

bak
Participant

Hi there

How can I have all promo elements the same width on mobile?

June 19, 2016 at 9:52 am #1049280

bak
Participant

This reply has been marked as private.

June 19, 2016 at 12:50 pm #1049405

Rupok
Member

Hi there,

Thanks for writing in! You have set padding 0 20%; for the column for the other one that you are getting narrow in mobile. Let’s use same padding.

Hope this helps.

Cheers!

June 20, 2016 at 5:49 am #1050342

bak
Participant

As you can see, the reason for the 20 % padding is that on desktop, the row has only 2 promo elements compared to the row above where there are 3 promo elements.

How can I keep the desktop design as is but have a mobile design where the promo elements have the same width?

Thanks

June 20, 2016 at 6:16 am #1050391
Christopher
Moderator
Hi there,

You can add a custom class to that specific column and add CSS only for desktop version.
```
@media (min-width:767px){
.my-class{

padding: 0 20%;
}
}
```
Hope it helps.
June 20, 2016 at 9:13 am #1050649

bak
Participant

Hi

I added the code below to the row and not column since the padding in cornerstone was on the row and not on the column

@media (min-width:767px){
.two-col_padding{

padding: 0 20%;
}
}

It did not work so I assume I did something wrong

In case it has to be added to the column, now would I achieve that the promo elements have the same width and distance from each other than the ones above in the 3 column row?

June 20, 2016 at 9:18 am #1050662

bak
Participant

This reply has been marked as private.

June 20, 2016 at 12:52 pm #1051069

Nabeel A
Moderator

Hi again,

I see you’re using an old version of X theme and Cornerstone. Please update your theme and Cornerstone to the latest version. You can find the latest version numbers here: (http://theme.co/changelog/) Then you can compare them to what’s installed on your site.

If you find anything to be out of date, you can review our update guide.

June 20, 2016 at 1:22 pm #1051136

bak
Participant

Hi there

I do not think that this is a version issue

I do not intend to update at this point as I want to finish content first and then save/backup everything and then update.

Thank you for your understanding

June 20, 2016 at 4:27 pm #1051455

Rahul
Moderator

Hey There,

Each version comes with new bug fixes and sometimes, it might just be the thing which could solve things for you. We always recommend our users to use the latest versions and update them as soon as they are available.

If you are using a child theme, you will not lose any customization so please feel free to update your theme and cornerstone.

Thanks

June 21, 2016 at 1:51 am #1052047

bak
Participant

This reply has been marked as private.

June 21, 2016 at 2:23 am #1052072

Christopher
Moderator

Hi there,

You added class name to row which is correct, I tried your CSS and it worked fine.
Upon checking your site, you didn’t add the code yet. Please add it, clear cache and check again.

Please make sure to open and close curly brackets at the right place.

Hope it helps.

June 22, 2016 at 9:02 am #1054343

bak
Participant

This reply has been marked as private.

June 22, 2016 at 10:28 am #1054477

Rupok
Member

Hi there,

Thanks for updating. The code is still correct but it’s not generating on your site. If your other CSS on that style.css file have any glitch then it might interrupt the other codes to be generated correctly. So make sure your other code is properly closed and correct.

Meantime you can try placing the same code under Custom > CSS in the Customizer.

Hope this makes sense.
Author

Posts

<script> jQuery(function($){ $("#no-reply-1049276 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>