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

Your Time: Our Time:

Set different padding / margin for desktop / tablet / mobile

Featured Lock Resolved Task
Hi guys,
Please, I need help, suggestions, best way on adding differents desktop/tablet/mobile paddings for:

Main Body > Row Options > Style > Paddings: ... / Margins: ...
Main Body > Component > Column Options >

3 Answers

Paul Frankowski - Staff

3 weeks ago #Permalink
Hi,
in that case, you have to use custom CSS, here is basic tip for those who knows CSS


// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }



define margins, padding for selected ID / Classes

joomleb

3 weeks ago #Permalink
Hi Paul, many thanks for suggestment : )

A - the Classes you wrote (Bootstrap 4) Are the ones used by Helix Ultimate by default ?

B - While, as fare as I know from here SP Page Builder is using only 3 of them, Am I right ?

C - Please, Which is the Class I have to add to still have applied "SP Page Builder > Section Row Options > Fluid Row" when needed ?

Paul Frankowski - Staff

2 weeks ago #Permalink
A - similar are from BT4
B - yes, SPPB Have only, I hope soon more. I also cannot wait for it.

C - do it from options.


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: 104
Toufiq

Toufiq

Total Accepted Answers: 52
Sifat

Sifat

Total Accepted Answers: 41
Mehtaz Afsana Borsha

Mehtaz Afsana Borsha

Total Accepted Answers: 24
Ofi Khan

Ofi Khan

Total Accepted Answers: 20

118

Templates

306418

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