Navigation
Archive / Nudge Right Pricing Table Header on Mobile
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • March 14, 2017 at 8:24 am #1406361
    leastweasel
    Participant

    I would like to nudge right the header of a pricing table column on mobile views only. I would like to do this so it doesn’t overlap with an image we are using in the header. Can you provide CSS to do this? (site details in next post)

    March 14, 2017 at 8:27 am #1406367
    leastweasel
    Participant
    This reply has been marked as private.
    March 14, 2017 at 10:16 am #1406518
    Rupok
    Member

    Hi there,

    Thanks for writing in! So you want to show them on mobile only, right? You can add this under Custom > CSS in the Customizer : 

    @media only screen and (min-width: 768px) {
.x-pricing-column.featured h2 {
	display: none;
}
.x-pricing-column.featured .x-pricing-column-info {
	border-top: 1px solid #e5e5e5;
}
}

    Hope this helps.

    Cheers!

    March 14, 2017 at 12:12 pm #1406788
    leastweasel
    Participant

    Hi. No sorry – I want to display in all cases but on mobile -> nudge the header text right so it doesn’t overlap with the image.

    March 14, 2017 at 1:33 pm #1406919
    Rupok
    Member

    Hi there,

    Thanks for clarifying. Let’s use this instead : 

    @media only screen and (max-width: 480px) {
.x-pricing-column.featured h2 {
	padding-left: 75px;
	font-size: 24px;
}
.x-pricing-column h2 span {
	font-size: 10px;
}
}

    Hope this helps.

    Cheers!

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