Joomla Templates Club 406,261 posts

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#539462

For the menu overlapping issue try this
add this code in custom.css

.navbar-nav {
margin-right: 50px;
}

Here

@media (min-width: 992px) {
div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
padding: 0px !important;
}
.navbar-nav {
margin-right: 50px;
}
.t3-sidebar-right .custom img {
width: 100% !important;
}
}

Hope it helps

[dpchap015 Friend dpchap015Join date: September 2011Posts: 300Downloads:75Uploads:57 Thanks: 1 Thanked: 24 times in 1 posts]

#539593

Thanks Ninja Lead and Pankaj:)
But still i can not use 300×250 banner because in mobile and table view its going big more then 300×250 :((((
because of 100% with of img may be .
Please Help me 🙁

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#539826

I have changed a bit from custom.css file on your site.

Change


div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
padding: 2px !important;
} @media (min-width: 992px) {
div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
padding: 0px !important;
}
.t3-sidebar-right .custom img {
width: 100% !important;
}
}

To


div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
padding: 10px !important;
}
@media (min-width: 992px) {
div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
padding: 2px !important;
padding-left: 3px !important;
}
.t3-sidebar-right .custom img {
width: auto !important;
}
}


Your site can work with 300×250 banner now.

[dpchap015 Friend dpchap015Join date: September 2011Posts: 300Downloads:75Uploads:57 Thanks: 1 Thanked: 24 times in 1 posts]

#539847

<em>@Ninja Lead 433459 wrote:</em><blockquote>I have changed a bit from custom.css file on your site.

Change


div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
padding: 2px !important;
} @media (min-width: 992px) {
div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
padding: 0px !important;
}
.t3-sidebar-right .custom img {
width: 100% !important;
}
}

To


div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
padding: 10px !important;
}
@media (min-width: 992px) {
div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
padding: 2px !important;
padding-left: 3px !important;
}
.t3-sidebar-right .custom img {
width: auto !important;
}
}


Your site can work with 300×250 banner now.</blockquote>
Hello Ninja Lead thanks for reply .
Now i can see its working perfectly on full screen ,
But same issue. If you will try to resize your screen .you can see that the images goes out of body , may be some padding issue

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#539954

In the smaller screen (iPad for instance), it also depends on the div outside 300×250 banner. To avoid the images going out of body, I am afraid it requires pretty much changes. So what I can do now is to fix the the 300×250 banner dimension as in my previous post.

[bossies Friend bossiesJoin date: September 2006Posts: 172Downloads:39Uploads:15 Thanks: 16 Thanked: 16 times in 2 posts]

#540938

hi – i am still new on this t3 bootstrap less stuff but i have another idea but need help implementing it. i see you use the custom.css and i used to play around with % in older version of t3 – i think i might still work but i am not a coder to put it together. i have tested the input in custom.css and it works, but i do not know how to put it together – do you think this might be a better solution. Then the only other thing you can temper with is the @grid-gutter-width: 80px; in the variables.less file – that will of course impact the % used in each situation

comments…?

@media (min-width: 1200px) {
.col-md-3 {
width: 31.2%;
}
.col-md-9 {
width: 68.8%;
}
}
@media (min-width: 992px) {
.col-md-3 {
width: 37.3%;
}
.col-md-9 {
width: 62.7%;
}
}

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#540939

Hello @bossies Plesae open a new thread for issue , and explain your issue briefly there .
We are happy to help you there 🙂

[bossies Friend bossiesJoin date: September 2006Posts: 172Downloads:39Uploads:15 Thanks: 16 Thanked: 16 times in 2 posts]

#540940

pankajsharma – its not a new issue, its my idea on how to get sidebar to work with banners 300×250 – could you have a look at it to see if that could work

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#540950

Thanks for your opinion bossis but it will not solve the issue .
as you i can see you decrease the width of main content and increased it for sidebar .
so not if you have tested it , you can see that the sidebar width is now around 450px .
you can test the above solutions by NInja Lead i think 🙂

[bossies Friend bossiesJoin date: September 2006Posts: 172Downloads:39Uploads:15 Thanks: 16 Thanked: 16 times in 2 posts]

#540952

i know – that is why i need help implementing it – if i only use @media (min-width: 1200px) {
.col-md-3 {
width: 31.2%;
}
.col-md-9 {
width: 68.8%;
}

its fine with a HD big screen, but i would like to implement a sort of if statement or a way to implement all the different % i want. i understand that the main content get smaller – in my case i am totally happy with it as long as the sidebar has 300px space to place a google ad

thus when the screen gets smaller, it must implement
@media (min-width: 992px) {
.col-md-3 {
width: 37.3%;
}
.col-md-9 {
width: 62.7%;
}
}

and so on – thus i need a IF statement of some sort?

[bossies Friend bossiesJoin date: September 2006Posts: 172Downloads:39Uploads:15 Thanks: 16 Thanked: 16 times in 2 posts]

#540953

i think i have it – start with the smallest screen and your setting and work up to larger as the last one that works will always be implemented – no if statement and it seems to work?

@media (min-width: 992px) {
.col-md-3 {
width: 37.3%;
}
.col-md-9 {
width: 62.7%;
}
}

@media (min-width: 1200px) {
.col-md-3 {
width: 31.2%;
}
.col-md-9 {
width: 68.8%;
}
}

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#540964

HI
The template is based on Bootstrap 3 .
You can not re defined the width for each col,
Bootstrap 3 is doing this auto .
As i already suggested you above , you can use the above suggestions by Ninja Lead to use 300×250 banner .
Hope it make sense 🙂

[bossies Friend bossiesJoin date: September 2006Posts: 172Downloads:39Uploads:15 Thanks: 16 Thanked: 16 times in 2 posts]

#540968

ok – all i want to know is if i redefine the width – does it have any negative implications – thus even if you do not like my solution, will it work without stuffing up anything else that i might not have thought about?

then, as per ninja lead…
In the smaller screen (iPad for instance), it also depends on the div outside 300×250 banner. To avoid the images going out of body, I am afraid it requires pretty much changes. So what I can do now is to fix the the 300×250 banner dimension as in my previous post.

i have not tried his solution as he said ” I am afraid it requires pretty much changes” and took it that there is too much changes to do this – did i read this incorrectly – have you tested the solution and does it work?

Then for future – the old system worked great for changing the width – a lot of people use google ads and even if they don’t, they use banners with the same sizes. This means it would be great if you develop your templates with standard banner sizes in mind like 300×250 or the 728 width banner.

[Pankaj Sharma Moderator Pankaj SharmaJoin date: February 2015Posts: 24589Downloads:144Uploads:202 Thanks: 127 Thanked: 4196 times in 4019 posts]

#541019

Hello Bosies i am forwarding your feedback to our development team , for considering it for future .
Hope it will not make issue in design , Now days most of the users wants wide width template . Wide width for the mainbody content , in that case its hard to make a sidebar 300×250 banner with a good design .
I hope development Team think about and will follow the standard image size for sidebar .

[Author]

Posts