Tab outer margin throws off Mobile

  • Resolved Dotyou

    (@dotyou)


    4 years, 10 months ago

    Hello, thank you for an amazing plugin! The problem I’ve been trying to solve is that, if I add an iframe URL within a tab, the entire iframe gets reduced in width to less than 100px, when seen on a mobile phone due to various padding settings. 1. How can I change the outer margins of a Accordion frame/header to have zero padding around the entire tab content so that as much of an iframe content as possible can be seen–in horizontal mobile view? Been trying to figure all this out for over a year and am now finally caving to contact you as I really don’t want to give up using this otherwise fantastic plugin. ??

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter Dotyou

    (@dotyou)

    Small edit to my original question: I would like the accordion tab header to take up full width in either horizontal or vertical view so as to be able to see full content within. Thanks.

    Plugin Author cubecolour

    (@numeeja)

    First you need to change the existing inline styles that are applied to the iframe:

    <iframe class="iframeclass" style="margin-left: -19px; margin-top: -46px;"

    The margin-left should be 0, and the margin-top should be 0 (or perhaps -28px to close the gap).

    Then add the following to your site’s custom styles (appearance -> customize -> Additional CSS):

    
.tabcontent{
  padding: 0!important;
}

    It should also be possible to make the tab area wider for mobiles by adding

    
@media (max-width: 767px) {

	.responsive-tabs-wrapper {
		margin: 0 -90px!important;
	}
}
    Thread Starter Dotyou

    (@dotyou)

    This has been tremendously helpful, thanks! For future reference, if I should change themes (and might forget that I have added this custom code under styles), would you remember which of the stylesheets in plugin editor I could also add this code to manually?

    Plugin Author cubecolour

    (@numeeja)

    It is not a good idea to edit plugin files as updating the plugin will remove the edits.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Tab outer margin throws off Mobile’ is closed to new replies.