Archived topic
Upgrading to Flexbox structure issues
5 replies · Started by Sam on July 21, 2022
Hello, opening a new topic on this as requested by David.
I upgraded to flexbox structure and I notice a few things I need to fix.
1) it seems to have changed the font-weight site-wide, you can compare our staging here:https://staging-supereightnet.kinsta.cloud/ with our live here: https://supereight.net/ I made the upgrade in staging, live is floats.
2) In the search in the nav bar when the input is active. It cuts off the submit button (added by a snippet from here) but only on mobile. It looks like it is the way it now lays out the none menu items like cart but I cannot work out how to fix it. If I could change the "value" to just a FontAwesome magnifying glass it would help as it would shrink the button, but I cannot work this out either so any help appreciated. I did change the snippet so it is like this <input type="submit" class="nav-search-submit" value="" /> but that for some reason only works when I am in the customizer.
Hope all that makes sense.
Regards
Sam
Hi there,
1. I forgot about this, Flexbox versions loads the overhauled CSS and part of that includes:
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}The difference in the typography is the smoothing we added.
If you want you can add this CSS to remove that:
html {
-webkit-font-smoothing: initial;
-moz-osx-font-smoothing: initial;
}2. Try the method Tom provides here:
https://generatepress.com/forums/topic/search-box-style/#post-999231
Right ok, noted. Regarding (2) I just can't figure it out. The method here works with the FontAwesome icon but only when viewing in the customizer. When viewing the page normally it just displays a stack of lines. See attached images in the private area.
When using the SVG method it just removes the button to the original without the submit button.
I guess the easiest is to stop using the submit button, I just figure this is a better user experience.
In the CSS use this for the 'font-family` property:
font-family: FontAwesome !important;
Awesome that worked! can't believe I didn't think of that.
Is there any way to make the button slightly wider on mobile without getting hidden by the input box?
thanks
Hi Sam,
Not sure I fully understand your question, try this CSS:
@media (max-width: 768px) {
input.nav-search-submit {
width: 60px;
}
span.menu-bar-item.search-item.active.close-search {
position: absolute;
right: 60px;
width: 60px;
text-align: center;
}
}Let me know if this is what you want.
