Frustrating CSS – Firefox

  • Resolved tgedge1

    (@tgedge1)


    5 years, 7 months ago

    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?

    • This topic was modified 5 years, 7 months ago by Andrew Nevins.

    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

    Thread Starter tgedge1

    (@tgedge1)

    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;
    }
}
    Thread Starter tgedge1

    (@tgedge1)

    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 5 years, 7 months 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?

    Thread Starter tgedge1

    (@tgedge1)

    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 5 years, 7 months ago by tgedge1.
    • This reply was modified 5 years, 7 months 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.

    Thread Starter tgedge1

    (@tgedge1)

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

    I really appreciate your help!

    • This reply was modified 5 years, 7 months ago by tgedge1.
    • This reply was modified 5 years, 7 months ago by tgedge1.
    • This reply was modified 5 years, 7 months 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.

    Thread Starter tgedge1

    (@tgedge1)

    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

    • This reply was modified 5 years, 7 months ago by Andrew Nevins.
    Thread Starter tgedge1

    (@tgedge1)

    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 5 years, 7 months ago by tgedge1.
    Thread Starter tgedge1

    (@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!

    Thread Starter tgedge1

    (@tgedge1)

    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.