test

how to change sidebar width for 300×250 banner

Forums    Joomla Templates Club    JA Sugite    how to change sidebar width for 300x250 banner
Viewing 15 posts - 1 through 15 (of 29 total)
1 2
  • Author
    Posts
  • dpchap015 Friend
    June 2, 2014 at 6:31 am #198389

    Hi

    template is really good i its design and all šŸ™‚ thanks for it

    but i am facing a problem in the sidebar of the template .
    the width of the sidebar is not a standard size width for the banners .
    width of banner is 234px why its not 300px?
    i can`t add the 300×250 banner in the sidebar now , it will goes out of the sidebar .
    Also the space in left and right side of the container is not equal .
    see this
    Also logo spinning stops working after update joomla to 3.3
    How to fix these issues?

    1. Welcome-to-EdTechReviewā„¢-ETR-
    TomC Moderator
    June 2, 2014 at 3:18 pm #537430

    So that we can try to best assist you, please provide the url of the site you’re working on

    dpchap015 Friend
    June 3, 2014 at 8:08 am #537558

    Hello @tom C
    you can see this sidebar issue in the JOOMLART DEMO site .
    for site url .Please check your PM

    Ninja Lead Moderator
    June 5, 2014 at 5:01 am #537840

    From the screenshot of you mentioned above, I see the advertisement in right of your site is greater than the size of the right panel, you have to expand dimension of right side to match with advertisement size.

    Please post your site’s URL here so that I can check it for you.

    dpchap015 Friend
    June 5, 2014 at 10:15 am #537870

    <em>@Ninja Lead 430795 wrote:</em><blockquote>From the screenshot of you mentioned above, I see the advertisement in right of your site is greater than the size of the right panel, you have to expand dimension of right side to match with advertisement size.

    Please post your site’s URL here so that I can check it for you.</blockquote>

    Hello Ninja
    I sent you all the details in PM .
    I installed a fresh copy for you .
    Thanks šŸ™‚

    Ninja Lead Moderator
    June 6, 2014 at 3:34 am #537961

    @dpchap015: You can apply my workaround below.

    Create the templates/ja_sugite/css/custom.css file and add new rule

    div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
    padding: 2px !important;
    }
    @media screen and (min-width: 768px) {
    .t3-module {
    margin-bottom: 28px !important;
    }
    }

    Let me know if it helps.

    dpchap015 Friend
    June 6, 2014 at 6:16 am #537987

    <em>@Ninja Lead 430959 wrote:</em><blockquote>@dpchap015: You can apply my workaround below.
    Create the templates/ja_sugite/css/custom.css file and add new rule

    div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
    padding: 2px !important;
    }
    @media screen and (min-width: 768px) {
    .t3-module {
    margin-bottom: 28px !important;
    }
    }

    Let me know if it helps.</blockquote>
    Hi Ninja lead
    I added the above css rule as per your instructions .
    but it will work only with the wide screen size .
    If you Will shrink the Size you can see module are going out of the Side panel .
    Also the space between left and right side is not equal .
    And Logo stop its moving property after updation on joomla to 3.3 .

    Ninja Lead Moderator
    June 9, 2014 at 8:39 am #538295

    <blockquote>
    I added the above css rule as per your instructions .
    but it will work only with the wide screen size .
    If you Will shrink the Size you can see module are going out of the Side panel .
    Also the space between left and right side is not equal .
    </blockquote>

    You have to add the css below if you want to work with tablet and mobile layout.

    In the templates/ja_sugite/css/custom.css file, add this rule:

    @media (max-width: 979px) {
    .t3-sidebar-right .custom img {
    width: 100%;
    }
    }

    <blockquote>And Logo stop its moving property after updation on joomla to 3.3 .</blockquote>

    I see the css styles on your site have been changed compared to the original style. Please check and change as follows:

    Open templates/ja_sugite/css/template.css file,

    Change

    .logo-image img {
    max-height: 56px;
    -webkit-transition: all 0.45s;
    transition: all 0.45s;
    }
    .logo-image a:hover img {
    transform: rotate(360deg);
    }

    To

    .logo-image img {
    -webkit-transition: all 0.45s;
    transition: all 0.45s;
    }
    .logo-image a:hover img {
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }

    dpchap015 Friend
    June 13, 2014 at 6:42 am #538798

    Hi
    Ninja Lead
    sorry for late reply (my boss is on leave so i was not allowed to post on forum ).
    i added these css in custom.css

    div.t3-sidebar.t3-sidebar-right.col-xs-12.col-sm-4.col-md-3 {
    padding: 2px !important;
    }
    @media screen and (min-width: 768px) {
    .t3-module {
    margin-bottom: 28px !important;
    }
    }

    @media (max-width: 979px) {
    .t3-sidebar-right .custom img {
    width: 100%;
    }
    }
    but the problem is same .
    if i minimize the screen the banner module goes out of screen and padding in left-right side is not equal .
    see this image

    1. Welcome-to-JomSocial
    Ninja Lead Moderator
    June 13, 2014 at 9:34 am #538823

    It is working fine, please clear cache your browser and check it again. You should see this result:

    1. dpchap015
    dpchap015 Friend
    June 16, 2014 at 3:38 am #538972

    <em>@Ninja Lead 432114 wrote:</em><blockquote>It is working fine, please clear cache your browser and check it again. You should see this result:

    </blockquote>

    Hi
    its fine in the wide screen but when minimize the screen slowly you can see the banner goes out of screen .
    and the padding in left and right side is not equal .

    Ninja Lead Moderator
    June 16, 2014 at 10:49 am #539036

    I just helped to get the problem on small screen fixed directly on your site. You can see the following declaration in the custom.css file.

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

    dpchap015 Friend
    June 18, 2014 at 4:35 am #539311

    <em>@Ninja Lead 432426 wrote:</em><blockquote>I just helped to get the problem on small screen fixed directly on your site. You can see the following declaration in the custom.css file.

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

    </blockquote>
    Hello NInja
    i checked the fixed by you , but it does not help šŸ™
    i want to use a banner 300×250 in the sidebar
    bu above solution 100% width of image
    the banner width decreased .
    Now its not 300×250 px

    Ninja Lead Moderator
    June 18, 2014 at 8:04 am #539326

    Please try this additional tweak to adjust the sidebar size. Open the custom.css file,

    Change


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

    To


    @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;
    }
    }

    dpchap015 Friend
    June 19, 2014 at 4:51 am #539456

    Hi
    Its solve the issue šŸ™‚
    But there is little problem now , When i shrink the screen size The Side menu overlap on the menu item .

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 29 total)
1 2

This topic contains 29 replies, has 5 voices, and was last updated by  Pankaj Sharma 10 years, 5 months ago.

We moved to new unified forum. Please post all new support queries in our New Forum

Important Notice :

New Unified Portal is live

Must Read

Jump to forum

Categories