Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Main Body Padding on Mobile device

Featured Lock Resolved Issue
Hi, how can I change the top padding of the section sp-main-body only on mobile view?

Thanks in advance. Stefano.

7 Answers

Paul Frankowski - Staff

More than a month ago #Permalink
Hi,
by using custom CSS, below example code is for Helix Ultimate, not SPPB which is component only.
This code is for mobile devices

@media ( max-width : 680px ){
#sp-main-body {padding: 50px 0;}
}


if 50px value is still too big, use 30px or less.

Paul Frankowski - Staff

More than a month ago #Permalink
p.s.
In case you do not know where to put it, please read
https://www.joomshaper.com/documentation/helix-framework/helixultimate#custom-code

Stefano

More than a month ago #Permalink
Perfect thanks!
One last question, is it possible to differentiate the css from Tablet and Mobile as on SPPB Builder?

Stefano

Paul Frankowski - Staff

More than a month ago #Permalink
For this padding only from custom CSS.
Example of how it may look like


// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) {
#sp-main-body {padding: 30px 0;}
}

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) {
#sp-main-body {padding: 40px 0;}
}

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) {
#sp-main-body {padding: 50px 0;}
}

Stefano

More than a month ago #Permalink
Everything is working fine!

Many thanks again. Stefano.

Paul Frankowski - Staff

More than a month ago #Permalink
you're welcome


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 133
Toufiq

Toufiq

Total Accepted Answers: 106
Sifat

Sifat

Total Accepted Answers: 69
ES

Emma Seymour

Total Accepted Answers: 1
B

blueoceanyyc

Total Accepted Answers: 1

116

Templates

300042

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us