Support » Fixing WordPress » Frustrating CSS – Firefox

  • Resolved tgedge1

    (@tgedge1)


    Hi,

    Really frustrated with CSS and Firefox.

    Page code looks like this:

    <div style="float: left; width: 100%;">
    <div class="fct1X">[facetwp facet="bar_diameter_range" ]</div>
    <div class="fct2X">[facetwp facet="bar_length"]</div>
    <div class="fct2X">[facetwp facet="head_stock"]</div>
    <div class="fct2X">[facetwp facet="brand"]</div>
    </div>
    
    <div style="float: left; width: 100%;">[facetwp template="bar_feeder_alt"]</div>

    In Chrome and MS EDGe – the four facets render properly next to one another [Bar Diameter Range | Bar Length | Head Stock | Brand |]

    In Firefox – they stack. Which is the DESIRED behavior for mobile screens.

    My CSS is as follows:

    .fct1X {
    	float: left;
    	width: 36%;
    	padding-right: 8%;
    	position:relative;
    	}
    
    .fct2X {
    	float: left;
    	width: 18%;
    	position:relative;
    }
    
    @media (max-width: 779px) {
       .fct1X,.fct2X {
           display:block;
           width:100%!important;
        }
        
     }
    

    Can anyone give me a hand and let me know what things I’m doing wrong?

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

Viewing 15 replies - 1 through 15 (of 15 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can I ask, are you writing the HTML for this? If so would you be able to structure these elements in a wrapping element? I.e.:

    
    <div class="wrapper">
       <div class="fctx1"> ... </div>
       <div class="fctx2"> ... </div>
       <div class="fctx2"> ... </div>
       <div class="fctx2"> ... </div>
    </div>
    

    I have an idea on how to style it with flexbox, would should be less of a headache

    Yes – I am writing it and have access. Would each need a different style?

    Also – I’m wanting it to stack (be mobile responsive) – just don’t want it to stack on the desktop.

    Let me know.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Does this do what you need?

    
    @media screen and (min-width: 768px) {
        .entry-content > .wrapper {
            display: flex;
            justify-content: space-between;
        }
    
        .entry-content > .wrapper > .fct2X {
            width: auto;
        }
    }
    

    Andrew,

    1 – No change on Firefox (still shows as stacked)
    2 – Chrome (Windows) shows proper orientation – but does not stack when window narrows
    3 – MS Edge (Windows) same as #2 above shows proper desktop orientation – but does not stack when window narrows.

    Desired Desktop Orientation (essentially inline if that makes sense):
    Bar Dia Range | Bar Length | Head Stock | Brand

    Desired Mobile Orientation(essentially stacked):
    Bar Dia Range
    Bar Length
    Head Stock
    Brand

    • This reply was modified 1 year, 1 month ago by tgedge1.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    That’s weird I can’t replicate that in firefox – can you try incognito and clear your browser’s cache?

    Okay – In Firefox Dev Edition – (could not for the life of me figure out how to make Firefox Incognito-mode)…

    BUT Dev Edition shows side by side on the desktop – as it should.

    However – like Chrome and Edge, Firefox also doesn’t stack when I narrow the window. The facets all scrunch together.

    So part of the puzzle is solved! And I’m not really lost with the Flexbox thing. :^)

    *** just figured out Incognito – and yes – side by side there also.

    • This reply was modified 1 year, 1 month ago by tgedge1.
    • This reply was modified 1 year, 1 month ago by tgedge1.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It will stack when the viewport is smaller than 768px – maybe the way you’re resizing the browser isn’t triggering that – i.e. it’s not an accurate mobile emulation. In Chrome, press F12 and a toolbar will appear. At the top-left of the toolbar there’s an icon that looks like a phone with an iPad. Press that.

    At the top of your browser you’ll then see a dropdown named “Responsive”. Change that to a device that’s in the list to view that emulated viewport.

    Thanks Andrew! I will check it out doing what you said!

    I really appreciate your help!

    • This reply was modified 1 year, 1 month ago by tgedge1.
    • This reply was modified 1 year, 1 month ago by tgedge1.
    • This reply was modified 1 year, 1 month ago by tgedge1.
    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    1 – What is corrupting the page in regular Firefox that it’s appearing strange? When incognito mode appears proper?

    Perhaps it’s addons you have, or maybe you’re zoomed in.

    Opps… hey Andrew, this is still an issue… https://imgur.com/a/n0kyY4Y

    (facets aren’t stacking at small viewport size)

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    What device is that and what browser?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I would also get rid of your CSS here:

    
    .fct1X {
    	float: left;
    	padding-right: 8%;
    	position:relative;
    	}
    
    .fct2X {
    	float: left;
    	width: 18%;
    	position:relative;
    }
    
    

    As that’s not necessary any more

    Edit: Updated

    I am looking at these in BrowserStack.
    https://live.browserstack.com

    I got rid of those styles.

    The desired appearance (a photoshop mockup): https://imgur.com/a/ECbiedG

    And F12 in Chrome: https://imgur.com/a/F6a7hRQ

    • This reply was modified 1 year, 1 month ago by tgedge1.

    Lets hold off for the evening. And let the caches clear. That might help. (We are behind a firewall that might be slower than our changes) Thanks for the help!

    Andrew,

    Turns out I have plugins on all three browsers which were conflicting with the layout in Firefox. I have not used Incognito before and it was a pleasant revelation. Incognito mode on all three browsers worked great. And I imagine now that Browserstack will respond likewise.

    And Flexbox is really cool. Have never used it before – but will probably not go back! :^)

    I really appreciate all your help with this.

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Frustrating CSS – Firefox’ is closed to new replies.