Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • November 17, 2016 at 2:42 pm #713583
    premedia

    http://screencast.com/t/Y1078eC3ilZ

    I have an audio player sitting inside a tabbed area. it looks fine on regular desktop view – there’s enough width to show the player and download icons etc clearly – even with the padding inside the tabbed area.

    however – when I shrink the screen to mobile view – the tabbed areas then move on top of each other with each tabbed content below.
    This looks ok – but the padding on left and right of tabbed area is now a problem since it takes away a lot of the tabbed area and the audio player is much harder to view clearly. How can I remove the LEFT and RIGHT padding within a tabbed content area for mobile view only?
    See screenshot for illustration of the issue – this is with the browser window shrunk down to minimum width on my mac – simulating the mobile responsive view.

    Thanks for your help in advance.
    Pete

    November 18, 2016 at 6:12 am #713846
    Rikard

    Hi Pete,

    Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    November 18, 2016 at 2:11 pm #714009
    premedia

    hi Rikard

    I managed to find some CSS to remove padding on mobile view – but it also removes padding on desktop view as well which is not ideal.
    http://screencast.com/t/locvocnKUNM mobile view – left and right padding removed. (small white band still shows at top and bottom of container).
    I used this:-
    —–
    .responsive .tabcontainer .tab_content {
    padding: 0px 0px;
    }
    —–

    Desktop view in private link below shows the padding also taken away on left and right. If there’s a way to fix this I would been keen to hear this.

    Also in the mobile view – is there a CSS fix to remove the small white band/padding at top and bottom as shown by the arrowheads in my screenshot?

    thanks for your support as always.
    Pete

    • This reply was modified 8 years ago by premedia.
    November 18, 2016 at 4:08 pm #714079
    premedia

    I found some CSS to fix my last problem for the small white band – I just coloured the background in to match the audio player. This is fine.

    So the only outstanding problem is that my CSS to remove tab content padding left and right in mobile view is also being carried forward into the desktop view.
    This is the CSS I used:-

    .responsive .tabcontainer .tab_content {
    padding: 0px 0px;
    }

    Thanks
    Pete

    November 18, 2016 at 4:11 pm #714081
    Yigit

    Hey!

    Please try changing your code to following one 

    .tabcontainer .tab_content {
padding: 0px 0px;
}

    Cheers!
    Yigit

    November 18, 2016 at 4:17 pm #714087
    premedia

    hi Yigit!

    Thanks for the idea. It has the exact opposite effect of what I want. Maybe my request wasn’t so clear.

    For normal view / desktop etc – I want to keep the padding on left and right of tab container.

    For mobile / responsive view I want to remove he padding on left and right of tab container.

    My attempt to solve was to use the .responsive CSS version – this worked for mobile view – but I found that this was also affecting the normal view and removing padding that I wanted to keep.

    Any idea how I can restrict the .responsive CSS to make sure it doesn’t get used everywhere?

    cheers

    Pete

    November 19, 2016 at 7:24 am #714283
    Rikard

    Hi Pete,

    So you only want the code to affect mobile? If so you can wrap Yigits code in a media query:

    @media only screen and (max-width: 767px) {
  .tabcontainer .tab_content {
    padding: 0px 0px;
  }
}

    Best regards,
    Rikard

    November 19, 2016 at 1:02 pm #714332
    premedia

    Hi Rikard,

    I found that this worked – like yours but I had to put .responsive in also:-

    @media only screen and (max-width: 767px) {
    .responsive .tabcontainer .tab_content {
    padding: 0px 0px;
    }
    }

    It only works well on the Tab option “with border”. Which is fine for my site as thats what I need :)
    if you choose tabs “without border” then the same CSS means you lose the padding on the right hand side of the desktop (non responsive view)

    thanks for your help.

    Pete

    November 20, 2016 at 7:32 am #714406
    Rikard

    Hi Pete,

    Ok great, glad you got it working and thanks for sharing :-)

    Please let us know if you should need any further help on the topic.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.