0
Welcome Guest! Login
0 items Join Now

SOLVED padding on phone only

Last Post
Search Topic

  • SOLVED padding on phone only

    Posted 7 years 11 months ago
    • Hi, i have the last one ( I hope... :) ) problem in bulding a site.
      I neeed to set to zero the padding right and left of a container (div.rt-block) on a module only and on phones only.
      I can not use class nopaddingright ecc... because on desktops it isn't ok.
      I can not create two different modules (one visible-phone and one visible-desktop) because this causes problems to the videoplayer inserted into the modules.
      See this page for example: www.mbreporter.it/ambiente/video/monza-dall-alto
      How to do, please?
    • Last Edit: 7 years 11 months ago by mauro buffa.
    #1351343
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22306
    • Thanks: 3229
    • messin' with stuff

    Re: SOLVED padding on phone only

    Posted 7 years 11 months ago
    • give your module a custom suffix like "custom-phone" and then reduce it's margin's padding with custom css

      .custom-phone {margin: 0; padding: 0;}
      This is how to create a custom CSS file compatible with Gantry 4:

      Simply create a file called "<TEMPLATENAME>-custom.css" and put this file in the CSS folder of the template (where <TEMPLATENAME> is the name of the template as seen in template manager e.g. rt_fracture). GANTRY4 will automatically load this CSS file. If you wish, you can also have browser specific files by appending, for example, "-ie9" making the filename "<TEMPLATENAME>-custom-ie9.css"

      More here: docs.gantry.org/gantry4/tutorials/adding-a-custom-stylesheet
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1351368

  • Re: SOLVED padding on phone only

    Posted 7 years 11 months ago
    • Intend to say that a class "xxx-phone" works on phones only?
      I need this.
      did I get it right?
    • Last Edit: 7 years 11 months ago by mauro buffa.
    #1351371
    • Matt's Avatar
    • Matt
    • Preeminent Rocketeer
    • Posts: 22306
    • Thanks: 3229
    • messin' with stuff

    Re: SOLVED padding on phone only

    Posted 7 years 11 months ago
    • you'd need to wrap it in a media query actually
      @media (max-width: 480px) {
  .custom-phone {margin: 0; padding: 0;}
}
    • SEARCH the forum first! These boards are rich in knowledge and vast in topics. This includes searching just the 'Solved' forums, using Google, and using ChatGPT :woohoo:
    #1351376

  • Re: SOLVED padding on phone only

    Posted 7 years 11 months ago
    • O yeah! Another rapid-nice-useful suggestion from RT team.
      Solved, thankyou. Best
    • Last Edit: 7 years 11 months ago by mauro buffa.
    #1351377

Time to create page: 0.053 seconds