Support Forums

Support Online : 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.
However, you are not allowed to reply to this post.

Leaderboard (30 days)

Sifat

Sifat

Total Accepted Answers: 117
Paul Frankowski

Paul Frankowski

Total Accepted Answers: 91
Toufiq

Toufiq

Total Accepted Answers: 32
Al Mamun

Al Mamun

Total Accepted Answers: 3
J

johnny

Total Accepted Answers: 3

100+

Templates

200,000+

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