Thu, 2021-04-22 21:51
I hope this is not too broad of a topic. I'm not well versed in CSS but am learning enough as I go to overhaul my Wordpress Storefront theme for my new website.
I got most of the basics done; custom semi-transparent background colors over a subtle background image, centered header image, placement, margin, padding, and widther adjustments of content and widgets, and custom widget background colors. Fairly basic stuff as far as I can tell. But I have a few problems...
Now, I imagine a first response might be "go to the wordpress forums". I've posted there several times andh ave no received much help. I'm told to not alter the code or to create a child theme (which I haven't figured out how to do yet), and I'm told that the theme is fully responsive and I shouldn't be having trouble with the mobile version, and that if I don't like the mobile version it's because I didn't design my site right.
So for the first part of WP's mod response, until I figure out how to create a child theme, I will continue to do what I'm doing, which is to keep altered and unaltered codes in separate saved documents, and color-coding all my custom alterations for my own ease of navigation.
For the second part; I "shouldn't" be having responsive issues, but I am. And I can't seem to get any help on their forums.
So, what is the issue? I'd like to disable the responsiveness, primarily because the mobile version of my online shop is a nightmare, you can only view 1 product on the screen at a time. The navigation is a nightmare. And contrary to the WP mod, I can't alter the shopfront layout or coding to change that.
I've read about it and Ive played with deleting the @media tags, but the main issue is that small screens "zoom in" and cram my content, widgets, and text tightly on the page. I've tried toying with the viewport metatag, but I haven't noticed any change on my website when I make major adjustments to the metatag, or even when I delete it altogether.
Ideally, I'd like to see a zoomed-out version of exactly what I see on the PC. That's what I had before I switched to WP recently, and that's what I want now.
So I have my header's viewport metatag meta name="viewport" content="width=800 initial-scale=1"
I've tried changing the content width to all sorts of different things and have seen no response on my website. I've also tried playing with the scale and have seen no change in appearance.
@media code from the style.css documentation for the website:
@media (min-width:){table.shop_table_responsive tbody tr td,table.shop_table_responsive tbody tr th{text-align:left}
@media (max-width:){.col-full{margin-left:0em;margin-right:0em;padding:0;background-color:rgba(39,86,40,0.80)
}@media (max-width:){.col-full{margin-left:0em;margin-right:0em;padding:0;}}
I left the min/max widths blank here because I'm actively playing around with pixel widths to disable tablet responsiveness. It used to be in em units but I'm using pixels because that's what I know.
Why is background-color:rgba(39,86,40,0.80) in there? Well that's my second biggest issue that doesn't even seem to be related to responive changes.
When my website switches to mobile version all my content backgrounds disappear, so I have white text on a subtle, bright background image. The menus also lose their background colors. You can't read anything. Adding this background color command was a patch to the problems but it caused other issues; mainly that it covers my header and logo in a green bar and I really dislike that.
And while I thought this was a problem with responsive changes, when I started altering the @media tags to respond only to tiny screens (thus experimentally disabling the responsive behavior altogether), I discovered that disabling responsive adaptation keeps my default content backgrounds, but my menu backgrounds still disappear on small screens! The menu doesn't change into the mobile menu, it simply loses its background color.
I have not actually altered any menu coding, nor have I commanded transparent backgrounds in any of the style.css coding document for the website. The menu background colors are not even dictated in the documentation I'm editing.
So the main navigation style code is here:
.woocommerce-active .site-header .main-navigation{width:74%;float:left;margin-right:0.0%;clear:both;}
If I add a background color, it shows up on my desktop website, but still disappears on the mobile/scaled-down version.
The main navigation for the responsive adaptation is:
.handheld-navigation,.main-navigation.toggled .handheld-navigation,.main-navigation.toggled div.menu,.menu-toggle{display:none}.primary-navigation{display:block}.main-navigation,.secondary-navigation{clear:both;display:block;width:100%}.main-navigation ul,.secondary-navigation ul{list-style:none;margin:0;padding-left:0;display:block}.main-navigation ul li,.secondary-navigation ul li{position:relative;display:inline-block;text-align:left}.main-navigation ul li a,.secondary-navigation ul li a{display:block}.main-navigation ul li a:before,.secondary-navigation ul li a:before{display:none}.main-navigation ul li.focus>ul,.main-navigation ul li:hover>ul,.secondary-navigation ul li.focus>ul,.secondary-navigation ul li:hover>ul{left:0;display:block}.main-navigation ul li.focus>ul li>ul,.main-navigation ul li:hover>ul li>ul,.secondary-navigation ul li.focus>ul li>ul,.secondary-navigation ul li:hover>ul li>ul{left:-9999px}.main-navigation ul li.focus>ul li>ul.sub-menu--is-touch-device,.main-navigation ul li:hover>ul li>ul.sub-menu--is-touch-device,.secondary-navigation ul li.focus>ul li>ul.sub-menu--is-touch-device,.secondary-navigation ul li:hover>ul li>ul.sub-menu--is-touch-device{display:none;left:0}.main-navigation ul li.focus>ul li.focus>ul,.main-navigation ul li.focus>ul li:hover>ul,.main-navigation ul li:hover>ul li.focus>ul,.main-navigation ul li:hover>ul li:hover>ul,.secondary-navigation ul li.focus>ul li.focus>ul,.secondary-navigation ul li.focus>ul li:hover>ul,.secondary-navigation ul li:hover>ul li.focus>ul,.secondary-navigation ul li:hover>ul li:hover>ul{left:100%;top:0;display:block}.main-navigation ul ul,.secondary-navigation ul ul{float:left;position:absolute;top:100%;z-index:99999;left:-9999px}.main-navigation ul ul.sub-menu--is-touch-device,.secondary-navigation ul ul.sub-menu--is-touch-device{display:none;left:0}.main-navigation ul ul li,.secondary-navigation ul ul li{display:block}.main-navigation ul ul li a,.secondary-navigation ul ul li a{width:200px}ul.menu li.current-menu-item>a{color:#43454b}.storefront-primary-navigation{clear:both}.storefront-primary-navigation:after,.storefront-primary-navigation:before{content:"";display:table}.storefront-primary-navigation:after{clear:both}.main-navigation div.menu{display:block}.main-navigation ul.menu,.main-navigation ul.nav-menu{max-height:none;overflow:visible;margin-left:-1em;-webkit-transition:none;transition:none}.main-navigation ul.menu>li>a,.main-navigation ul.nav-menu>li>a{padding:1.618em 1em}.main-navigation ul.menu>li.menu-item-has-children:hover:after,.main-navigation ul.menu>li.page_item_has_children:hover:after,.main-navigation ul.nav-menu>li.menu-item-has-children:hover:after,.main-navigation ul.nav-menu>li.page_item_has_children:hover:after{display:block}.main-navigation ul.menu ul,.main-navigation ul.nav-menu ul{margin-left:0}.main-navigation ul.menu ul li a,.main-navigation ul.nav-menu ul li a{padding:.875em 1.41575em;font-weight:400;font-size:.875em}.main-navigation ul.menu ul li:last-child,.main-navigation ul.nav-menu ul li:last-child{border-bottom:0}.main-navigation ul.menu ul ul,.main-navigation ul.nav-menu ul ul{margin-left:0;box-shadow:none}.main-navigation ul.menu ul a:hover,.main-navigation ul.menu ul li.focus,.main-navigation ul.menu ul li:hover>a,.main-navigation ul.nav-menu ul a:hover,.main-navigation ul.nav-menu ul li.focus,.main-navigation ul.nav-menu ul li:hover>a{background-color:rgba(0,0,0,.025)}.main-navigation a{padding:0 1em 2.2906835em}.secondary-navigation{margin:0 0 1.618em;width:auto;clear:none;line-height:1}.secondary-navigation .menu{font-size:.875em;width:auto;float:right}.secondary-navigation .menu>li:hover>a{text-decoration:none}.secondary-navigation .menu ul a{padding:.326em .875em;background:rgba(0,0,0,.05)}.secondary-navigation .menu ul li:first-child a{padding-top:1em}.secondary-navigation .menu ul li:last-child a{padding-bottom:1em}.secondary-navigation .menu ul ul{margin-top:-.6180469716em}.secondary-navigation .menu a{padding:1em .875em;color:#737781;font-weight:400}.secondary-navigation .menu a:hover{text-decoration:none}.
Because I'm not 100% sure on exactly which elements of the mobile navigation menu each of these commands will effect, my next step might be to start commanding a background color wherever I think it might respond properly, then cross-check on my website. That's basically how I've been learning CSS: Ooookay, what does this do? Woops! Not that! Undo. Okay.... What about this one? Ah, that's the one I wanted!
So... yeah. I would like to figure out how to finish manipulating the coding to:
1. disable responsive adaptation
2. load pages on small screens as desktop version/zoomed out
3. get my menus to keep their backgrounds
Any tips would be greatly appreciated. I'm constantly fiddling with it and reading about CSS. I grew up on HTML and never learned anything else, so I'm slow on the uptake...
