Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
Like Tree1Likes
  • 1 Post By mlseim

Thread: urgent help needed finding bug

  1. #1
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times

    urgent help needed finding bug

    ok so theres a lot of code but most of it is commented, heres the problem I'm having.

    the main section has 2 containing elements, a div called slideshow which is just an image fader fading between 2 images, then there is a blockqoute with a heading and some text. so I'm designing for mobile first, naturally these two appear one after the other when i minimize the screen to a mobile device size, i scale up to a 500px width media query and only change he position and appearance of the nav links. in the 500px media query the slideshow and blockquote are one after the other vertically. that's what i want but the problem begins when i do a min width media query of 600 px. i want the two main elements to appear side by side, a certain amount of px from the left and right sides of the screen respectively. i change the elements to inline block and so the first element in the main behaves fine, right at the very left of the screen as defined in the rule, the problem is the blockquote, it appears slightly down from the top whereas the gallery is right below the footer with no space in between, also when i set px for the blockquote from the right side of the screen it doesn't behave at all, if i wanted to get it to the very edge i would have to set right: -whatever px. its as if its behaving if the screen is only 600px even though i declare min-width in the query. i cant see whats going wrong, i originally had the main as a flex box but it was behaving the same way so i thought id try it old school but its still not working.

    ok so as i said theres a lot of code, but ill break it up

    html before main section

  2.  

  3. #2
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    <!-- doctype declaration -->
    <!doctype html>
    <!-- root html tag-->
    <html lang="en">
    <!-- head tag containing title, links and meta tags -->
    <head>
    <!-- stylesheet link -->
    <link rel="stylesheet" href="css/style.css">
    <!-- stylesheet for google font used with the header -->
    <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
    <!-- meta tags for charset and initial scale -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- title K22 jewellery -->
    <title> K22 jewellery </title>
    <!-- jquery link -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <!-- body element containing content structure -->
    <body>
    <!-- header element containing page heading and navigation along with menu icon for mobile site -->
    <header>
    <!-- heading element -->
    <h1> K22 <span id="h1jy">jewellery</span> </h1>
    <!-- menu icon to dsiplay nav upon click -->
    <img src="images/menuicon.svg" alt="menuicon" width="20" id="menuicon" />
    <img src="images/shopping-cart.svg" alt="cart" width="20" id="carticon" />
    <!-- login/signup button -->
    <a href="#" id="login">Login | Signup</a>
    <!-- navigation list to be displayed on click of the menu icon -->
    <nav>
    <ul id="navlink">
    <li><a href="index.html">home</a></li>
    <li><a href="about.html">about us</a></li>
    <li><a href="b-orders.html">bespoke orders</a></li>
    <li><a href="shop.html">shop</a></li>
    <li><a href="contact.html">contact us</a></li>
    </ul>
    </nav>
    </header>
    main section html
    <main id="mobile-content">
    <!-- wrapper div for the image fader -->
    <div id="slideshow">
    <!-- section image 1 -->
    <section>
    <!-- checked validator and says sections should have headings but im not putting any here anyway -->
    <img src="images/img1.png" alt="quality design affordable price" width="260">
    </section>
    <!-- section image 2 -->
    <section>
    <img src="images/img2.png" alt="made to order" width="260">
    </section>
    </div>
    <!-- blockqoute telling a lil bit about the techniques used -->
    <blockquote>
    <h1>Quality craftsmanship</h1>
    <p>K22 jewelley makers incorporate ancient Greek jewellery making techniques in every aspect of the manufacturing
    process to ensure your piece is completely unique and steeping in Greek culture.</p>
    </blockquote>
    </main>
    html after main
    <!-- BEGIN FOOTER -->

    <footer>
    <!-- 4 anchor tags for the various footer links -->
    <a href="#" class="fa">Sizes</a>
    <a href="#" class="fa">Gift certificates</a>
    <a href="#" class="fa">Shipping and returns</a>
    <a href="#" class="fa">Privacy policy</a>
    <!-- finally using flex box, start with one containing element followed by 3 anchors with images for the social links -->
    <div id="flex">
    <a href="#" class="icon">
    <img src="images/facebook.png" alt="facebook logo">
    </a>
    <a href="#" class="icon">
    <img src="images/twitter.png" alt="twitter logo">
    </a>
    <a href="#" class="icon">
    <img src="images/linkedin.png" alt="linkedin logo">
    </a>
    </div>
    </footer>
    <!-- ************************************************** ************************************************** ****************** -->
    <!-- END FOOTER -->
    <!-- ************************************************** ************************************************** ****************** -->
    <!-- script to display menu on click -->
    <script src="javascript/mobilemenu.js"></script>
    <!-- script for the mobile version image fader in jquery borrowed from codepen -->
    <script src="javascript/fade.js"></script>
    </body>

    </html>

  4. #3
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    css before main section

    /* ************************************************** ************************************************** ************************ */
    /* CSS RESET */
    /* ************************************************** ************************************************** ************************ */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

    /* ************************************************** ************************************************** ************************* */
    /* BEGIN STYLESHEET---- MOBILE FIRST */
    /* ************************************************** ************************************************** ************************* */
    /* body styles */
    body {
    /* position to relative in case i need to absolutely position elements throughtout the page, margin to 0 auto, width to 100% */
    position: relative;
    margin: 0 auto;
    width: 100%;

    /* fancy site, fancy background image repeated on the x and y axis */
    background-color: rgb(220,220,220);
    /* default font family and base style of 16px so i can use em later, k22 heading will use font from google fonts */
    font-family: helvetica, arial, sans-serif;
    font-size: 16px;
    }

    /* header */
    header {
    background-color: rgb(60,0,40);
    width: 100%;
    min-height: 150px;
    }
    /* main h1 heading within header */
    header h1 {
    text-align: center;
    /* width of h1 and margin to center */
    width: 80%;
    margin: 0 auto;
    /* font family of dancing script from google fonts */
    font-family: dancing script;
    /* larger font size and bold weight to give the header more volume */
    font-size: 2.5em;
    font-weight: bold;
    /* my attempt at a gold color for the k22 part of the header */
    color: rgb(255,220,115);
    /* letter spacing to spread things out */
    letter-spacing: 2px;
    /* padding */
    padding: 1em .2em .4em .2em;
    /* bottom border as underline */
    border-bottom: 2px solid black;
    }

    /* id points to a span within the main header for the word jewellery */
    #h1jy {
    /* my attempt at a silver color */
    color: rgb(192,192,192);
    }

    /* menu icon positioning styles */
    #menuicon {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: .6em;
    }

    /* shopping cart positioning styles */
    #carticon {
    position: absolute;
    top: 0px;
    right: 0px;
    padding: .6em;
    }

    /* positioning for login and signup button and also styling */

    #login {
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 10px;
    width: 120px;
    text-decoration: none;
    color: rgb(150,150,150);
    letter-spacing: 2px;
    font-size: .8em;
    }

    /* navigation list initially set to display none, setting of position to relative */
    header nav ul {
    position: relative;
    display: none;
    background-color: rgba(10,10,10, .8);
    width: 100%;
    }

    /* styles for the individual li elements */
    header nav ul li {
    text-align: center;
    width: 100%;
    padding: .2em;
    }

    /* removing default styles for anchor links adding colour size and line height */
    header nav ul li a {
    text-decoration: none;
    color: rgb(150,150,150);
    letter-spacing: 2px;
    font-size: 1em;
    text-shadow: 0px 0px 5px rgb(150,150,150);
    }

    header nav ul li a:hover {
    color: white;
    text-shadow: 0px 0px 5px white;
    }
    main section css

    /* just some basic settings for main section */
    #mobile-content {
    margin: 0 auto;
    width: 100%;
    }
    /* set position to relative to allow the absolute positioning of the section for fader other than that are the usual declarations*/
    #slideshow {
    position: relative;
    margin: 0 auto;
    display: block;
    height: 265px;
    }

    /* position set to absolute to allow the fader to work, left and right set to 0 to allow centering along with margin aout */
    #slideshow > section {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    }

    /* centering image and giving some space between top and bottom also set max width */
    #mobile-content section img {
    display: block;
    margin: 0 auto;
    max-width: 300px;
    }

    /* blockqoute centered colored both text and background added padding and max width */
    #mobile-content blockquote {
    margin: 0 auto;
    text-align: center;
    color: rgb(200,200,200);
    letter-spacing: 2px;
    line-height: 1.2em;
    background-color: rgb(100, 100, 100);
    padding: .5em;
    max-width: 245px;
    }

    #mobile-content blockquote h1 {
    font-family: dancing script;
    font-size: 1.8em;
    line-height:1.2em;
    color: rgb(255,220,115);
    }
    css for footer

    /* footer with slightly darker background, centered and some padding to give buffer between content and edges */
    footer {
    position: relative;
    margin: 0 auto;
    padding: 1em
    width: 100%;
    background-color: rgb(160,160,160);
    }

    /* styling the anchor links, some padding font color, the usual */
    .fa {
    text-decoration: none;
    display: block;
    margin: 0 auto;
    padding: .5em;
    text-align: center;
    color: rgb(60,0,40);
    letter-spacing: 2px;
    font-size: .8em;
    }

    /* finally using flex box, this is for the 3 social media icons */
    #flex {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    }
    500px media query

    @media screen and (min-width: 500px){

    /* first things first, remove the menu icon */
    #menuicon {
    display: none;
    }


    /* next modify the nav ul to display below the heading */
    header nav ul {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    background: none;
    margin-top: .4em;
    }

    header nav ul li a{
    font-size: .6em;
    }

    }
    media query for 600px min

    @media screen and (min-width: 600px){

    #mobile-content {
    width: 100%;
    background-color: white;
    }

    #slideshow {
    position: relative;
    display: inline-block;
    width: 245px;
    margin: 0 auto;
    }

    #mobile-content blockquote {
    position: relative;
    display: inline-block;
    width: 245px;
    right: 0px;
    }

    }

  5. #4
    Senior Member
    Join Date
    Apr 2016
    Posts
    717
    Member #
    53891
    Liked
    11 times
    i didn't leave out any code just had to break it up to be easier to follow

    a speedy reply is massively appreciated as the assignment is already late :/

    thanks guys

  6. #5
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,686
    Member #
    5580
    Liked
    716 times
    First of all .... Jewellery is spelled: Jewelry

    I don't just want to throw out a lame answer, but I think your problem lies with two things:
    1) The order of the media rules
    2) The misconception of min and max width.

    This is a lot of reading, but it explains it way better than I can:
    https://www.emailonacid.com/blog/art..._and_max-width
    busso likes this.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 03:21 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com