css issues on responsive_classic

[flappingfish]

So as the title says, I have a few css issues in my hope to make a really wild edit of the responsive_classic template as i thought it may save me a good old bit of time and so far so good with the exception of 3 issues presently. Can anyone help?

ohcomputer.co.uk

it's 3am and i was hoping to be able to launch this tomorrow as i am running out of time to get ticket sales open and i still have a ticketing module and numinix product fields to install for that module to function, I think that will take time itself. I also still need to draft all the delivery terms, privacy ect too and style every page after the home page that needs tweaking :s Hopefully someone can point me in the right direction? i'm going to start the module installs and hope someone can spare a few to give some help to a newb whilst i try and complete a new task :) issues are as follows that i'm stuck with...

1. I have a "skull_container" that well.. contains a skull and took hours to figure out how to do and set nice. Somehow my pages bar just below the header has decided to suddenly shift from left to centre so my only page link is actually under the skull, no idea if that is css or stylesheet as i have genuinely never planted a skull in the centre of a website before, hence never having this issue before :s

2. I had some kind of issue that took a day to resolve where i had white banners, i installed the stripe module which (i'm assuming) has now brought back the return of said white bars. I assume there is now possibly a neat payment types graphic hiding under my tagline wrapper (which is now in the footer along with some huge social media fa icons) and i'm unable to see it too click inspect to be able to increase the z-index so i can see it and style it??

3. Adobe fonts... grrrrrr!! 2 fonts, one typekit url and one loads on mobiles but the other refuses. the tagline works but i only see the font if i use a mobile emulator in chrome or on desktop, when i try my s23 and my mate tried on his iphone that font is point blank refusing to load and when i asked adobe... they terminated the chat after telling me i was on the wrong page, fair enough... shame the link lead me back to the page i contacted them through. I feel like i'm going to be forced to buy the license for the font if i want to keep it as i've tried that long to get it too work :/ font is "chinese rocks" and i did try to find a google alternative yesterday, i spent hours looking for a font i liked, don't fancy doing that again in all honesty

Any help would be really appreciated.

[flappingfish]

number 2 resolved, thought id got a lead on the font issue and found this..... .onerow-fluid{width:75% !important;margin:auto;} which i just changed too 100% right at bottom of stylesheet.css no doubt ill find a reson why it was set that way. still 1 and 3 to solve but i did find a free download and 25k per month license for the font, lets hope i can a. remember how i installed the first and b. it just works :)

[dbltoe]

Line 228 of stylesheet.css

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo, #bannerThree, #bannerFour, #bannerFive, #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading, .rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {    /* text-align: center; */
}

You can remove the #navCatTabsWrapper then...

Line 338 of styleshee.css

#navCatTabs ul {
    font-size: 0;
    text-align: center;
    overflow: hidden;
}

Line 346 of stylesheet.css

#navEZPagesTop ul {
    font-size: 0;
    text-align: center;
    overflow: hidden;
}

Line 10 has been added out of sequence and is incorrect. Not best practices but, it should be

#logo a img {
    max-width: 50%;
    height: auto;
}

Normally, you would not use an ID in a rule but it won't work here without it as it would mess with other images using an image.

You should take advantage of codebeautify.org/sddvalidate to fix all the CSS errors in stylesheet.css. I doubt there were that many in the downloaded version.

I don't know how you have managed to do it, but you have fooled all the accessibility checkers. There's no way that "3 Days of Live Rock, Metal, and Camping!" really meets color contrast requirements.

[flappingfish]

Thankyou dbltoe, i was just coming back to update this to say qr ticketing module not done yet but good news at least as things are looking alot closer to being good to go live i'm basically learning as i go, ive gone from copy and paste from chatgpt to telling it that it's entirely wrong for it to then spit out the correct answer with a backup and try mythology on the go. Afew things it obviously got wrong that someone more experienced would have most definetlyremoved or tweaked before pressing save no doubt :)

I actually now have 2 taglines, not sure how i ended up with one on the home pages content area, ill be setting that one too hidden in a moment. I literally just sorted adobe fonts issue too. I found one of the links (the very last one) had a very convenient free license, its now installed as a font kit with upto 25k views a month and chinese rocks does indeed work on my phone.

If you think accessibility is fooled there too... i haven't tested the white descriptions out on white boxes yet :s sounds like a fun thing to do before i try an read the installation instructions for numinix product fields... lol

since finding the font works i now have a new issue, my "hamburger" menu on mobiles, i cannot get that sized nice, just as i do something else gets a tweak and i'm back to square one. That graphic genuinely gets worse each time i'm forced to remake it.
How would one find out the true image size? I have either attached it too the wrong panel or the panel will readjust anytime i add a page meaning i will have too compensate :s i can see the size on dev tools but when i make it pixel perfect in photoshop, well... it just dislikes me, i'm positive of it lol.

[flappingfish]

I just realised this thread is terribly titled and is not very clear, I should clarify its the changes i am making im having issues with, if an admin could edit that to "help with template tweaking issues" that would be better. Currently after a decent sleep i am seeing that may read as there is an intrinsic issue with the responsive classic template when there is not, the issue is quite obviously me

If anyone could point me to a thread to add the hamburger menu to desktop view? My skull covers the centre of the categories and I've found no otherway to add the links to the desktop view that would resolve the issue or maybe missed the option if i could add it too the header instead and position it right on the screen I can overcome the issue adding the skull caused.

My second issue is that the skull seems too not seem to stay nicely positioned on some pages it is slightly lower and on others it is apparently completely detached and sat proudly in the centre of the screen through an error in setting up a module I've done a part restore and possibly lost something as the above edits are in place the dbl toe suggested.

3rd issue I can just replace the java image slider on the about us page for the images in a column i guess as i found it online at w3 school, got everything connected and it appears but it seems to be set against the whole page and not the main content area, I assume I have made a silly mistake in the below code when entering it in as plain text under the page editor...

<html lang="en">
<head>  
  <!-- Google Fonts Link For Icons -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@48,400,0,0" />
    <link rel="stylesheet" href="cfest_slider_about_us.css" />
    <script src="jscript.cfest_about_us.js" defer></script>
  </head>
  <body>
<br>
<br>
    <div class="container">
      <div class="slider-wrapper">
        <button id="prev-slide" class="slide-button material-symbols-rounded">
          chevron_left
        </button>
        <ul class="image-list">
          <img class="image-item" src="/images/image-5.png" alt="img-1" />
          <img class="image-item" src="/images/crazyfest_deck _venue.webp" alt="img-2" />
          <img class="image-item" src="/images/crazyfest_deck _ticket.webp" alt="img-3" />
          <img class="image-item" src="/images/crazyfest_deck _botb.webp" alt="img-4" />
        </ul>
        <button id="next-slide" class="slide-button material-symbols-rounded">
          chevron_right
        </button>
      </div>
      <div class="slider-scrollbar">
        <div class="scrollbar-track">
          <div class="scrollbar-thumb"></div>
        </div>
      </div>
    </div>
  </body>
</html>