The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

How to override responsive styles

AlericAleric Member
I have a custom checkout page. It's pretty simple I just add

{% include '' %}

{% import "" as utils %}
{% use '' %}
{{ block('checkout') }}

in between my typical header/footer. Everything is fine except that the checkout is slightly wider than my normal page. Using firebug I determined that I needed to override;

#fc .fc-container {
max-width: 900px;

However, no matter where I place that css it ends up in the middle and gets overwritten by the responsive css. What is the correct way to do this?
  • fc_jedfc_jed FoxyCart Team

    Sorry for getting back to you so late. Could you whisper your store name so that I could investigate further?
  • Hi Aleric,

    Adam will probably have some excellent input for you but in the may be experiencing what is commonly called CSS specificity. That is where the CSS of FoxyCart is higher in specificity than your CSS is such that the FoxyCart wins in how your page is rendered.

    Just Google for "CSS specificity" and read some of the pages that show up for details to understand what may be the problem here.

    For what it's worth. I'll let Adam or someone else from FoxyCart give you more specific recommendations.

  • fc_jedfc_jed FoxyCart Team
    edited June 2015

    Sorry for getting back so late. As Carlos pointed out, CSS Specificity could be affecting your issue. Instead of override, you can include the Twig code you added into a div and add another class to it. Check out for more reference.
  • AlericAleric Member
    Of course, that makes sense. I'm in the middle of a rework so I may or may not try that out. Thanks!
Sign In or Register to comment.