0
Welcome Guest! Login
0 items Join Now

SOLVED Gantry width classes - right margin not applied

Last Post
Search Topic

  • SOLVED Gantry width classes - right margin not applied

    Posted 8 years 8 months ago
    • gantry-left applies margin-right:25px, which is great.

      But I am noticing that this right margin is not appearing in IE and firefox, at least not in this case. I don't think it is the code inside the div, so am wondering how to fix this.
      Here is my code:
      <div class="gantry-width-block gantry-width-25">
<div class="gantry-left">
        <div class="flip-box-wrap"><div class="su-flip-box horizontal_flip_right">
        
         <div class="front-flip_box" style="background-color:#ffffff;
            color:#444;
            border:none;
            box-shadow:none;
            border-radius:0px;
            text-align:center;
            padding:0;
            ">
            <img src="/dn-new/images/flip/flip2-kit-front.jpg" alt="free starter kit info">
            </div> 
        <div class="back-flip_box" style="background-color:#e7a930;
            color:#444;
            border:none;
            box-shadow:none;
            border-radius:0px;
            text-align:center;
            padding:0px;
             ">
             <a href="/dn-new/index.php/free-starter-kit"><img src="/dn-new/images/flip/flip-o-kit-back.jpg" alt="flip o kit back"></a>
             </div>
             <div style="clear:both;height:0">
        </div>
        </div>
</div>
</div>



      Any suggestions are appreciated.
    • Last Edit: 8 years 8 months ago by Vicky Thomas. Reason: removed links to site
    • An old dog can learn new tricks - I saw it on Mythbusters!
    #1231161
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Gantry width classes - right margin not applied

    Posted 8 years 8 months ago
    • 1. you actually don't want to use "gantry-left" because that floats the content and then it won't be constrained by the container. Instead of "gantry-left" use "myclass" and then:
      2. Use this code...
      .myclass {
   margin-right: 25px;
}

      Also, it's not a good idea to be putting all that CSS inline in your html - it makes it really hard to maintain that code - you should be using classes and putting the CSS in a custom CSS file instead.

      Regards, Mark.

    • The following users have thanked you: Vicky Thomas

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1231162

  • Re: SOLVED Gantry width classes - right margin not applied

    Posted 8 years 8 months ago
    • Thanks, Mark. Will do.
      Yes, I used the shortcode 'as is', but see your point and will make a class for those styles.
      Vicky
    • An old dog can learn new tricks - I saw it on Mythbusters!
    #1231172

Time to create page: 0.050 seconds