Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 3, 2018 at 12:38 am #936241
    webWahine

    Hello
    I’m styling some tabbed content and I’m trying to make an image with hotspots fullwidth inside an open tabbed area. By default it has the 50px border and I’d like to target and remove that, please (I’d like the lager ‘8’ to be flush to the edges of the browser).

    I gave the tab a class called ‘plates’ and assigned a margin 0f 0px but that didn’t work. I also gave the image with hotspots a class called ‘floorPlates’ but that’s not targeting the correct element.

    Please advise. Thank you in advance :)

    April 3, 2018 at 9:54 am #936413
    Victoria

    Hey webWahine,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (min-width: 768px) {
  .av-layout-tab {
    padding: 0;
  }
  .av-hotspot-container-inner-wrap img {
      margin: 0px -4em;
      width: 115%;
      max-width: inherit;
  }
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    April 3, 2018 at 8:11 pm #936759
    webWahine

    thank you! That worked nicely – I simply added in a page id to target a specific page as I’m using the hotspots on another page as well :)

    April 3, 2018 at 8:18 pm #936761
    Jordan Shannon

    Hi,

    I’m glad you got this corrected. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • The topic ‘Make an image with hotspots fullwidth in a tab’ is closed to new replies.