Joomla Templates Club 406,261 posts

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#200585

hi, how can i reduce the padding for left/right on mobile view without a horizontal scroll bar!?

/bootstrap-responsive.css

@media (max-width: 767px) {
body {
padding-left: 10px;
padding-right: 10px;
}

see screenshot joomlart demo

---

Attachments:

1. 

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#546336

@testcouch,

I tested our demo and your site on my mobile, but I did not get the error as you mentioned.

---

Attachments:

1. 

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#546344

you are right.

Do that in this File: templates/ja_social_t3/css/themes/responsive/bootstrap-responsive.css

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#546356

<em>@Chavan 441781 wrote:</em><blockquote>you are right.

Do that in this File: templates/ja_social_t3/css/themes/responsive/bootstrap-responsive.css</blockquote>

that’s the same file wich already tried with no luck 😉

I need a Code wich works!?

[chavan Friend chavanJoin date: October 2014Posts: 4612Downloads:0Uploads:110 Thanked: 1440 times in 1290 posts]

#546378

Then Replace this code

@media (max-width: 767px) { body { padding-left: 10px; padding-right: 10px; }

with

@media (max-width: 767px) { body { padding-left: 4px; padding-right: 4px; }

Do that in this File: templates/ja_social_t3/css/themes/responsive/bootstrap-responsive.css

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#546389

@chavan

code above produce also a horizintal scroll bar with safari browser! 10px or 4px makes here no difference..there must be a additional css query

@nazarioA thanks for your screenshots but you must change padding in bootstrap-responsive.css with firebug from 20px to 10px or 4px to see the scroll bar issue! please remove the screenshot from my site above 😉

[Nazario A Friend Nazario AJoin date: April 2013Posts: 1183Downloads:0Uploads:406 Thanks: 91 Thanked: 284 times in 263 posts]

#546477

@testcouch,

Here is solution for you:
– Open file: /templates/ja_social/css/custom.css (if not exists, pls create new one), then add this rule:

@media (max-width: 768px){
body {
padding-right: 10px;
padding-left: 10px;
}

.t3-footer {
margin-left: -10px;
margin-right: -10px;
}

.t3-header {
margin-left: -10px;
margin-right: -10px;
}
}

* You should add your custom code into file /templates/ja_social/css/custom.css, it will help you keep your customization stay intact when updating your template.

Let me know if this helps

1 user says Thank You to Nazario A for this useful post

1. testcouch

[testcouch Friend testcouchJoin date: October 2013Posts: 155Downloads:0Uploads:45 Thanks: 30 Thanked: 9 times in 1 posts]

#546795

@nazario A

thank you very much it works 🙂

[Author]

Posts