Grow your CSS skills. Land your dream job.

html5 boilerplate – need help — stuck with lot of CSS issues.

  • # May 20, 2013 at 11:50 pm

    Hi,

    I am trying to make a simple website with bp. (it contains 5 images back to back) and a fixed div on top (with sliding up & down menu bar)

    What i am not able to figure out is the proper css elements for each of them.

    1) why are the pics chosen by me is taking 100% size on all elements (i want these pics to take 100%) – i am sure i am unable to put css properly.

    Code:







    2) My jquery menu script is playing hanky panky with me. Its not working as it should be.

    Code:

    in html5 the script will influence below code.

    Can anyone please help me out???

    # May 20, 2013 at 11:56 pm

    Awesome, a cryptic message to figure out before you can solve the problem.

    # May 20, 2013 at 11:57 pm

    Umm, i get the sarcasm :) ,but before that i would like to know what exactly do you think i should be sharing so that i can get my message across clearly.

    # May 21, 2013 at 1:20 am

    The forum tends to muck up code if you don’t wrap it correctly in code tags. Try using CodePen and putting your code there. It will be easier for us to help you.

    http://codepen.io/pen/

    # May 21, 2013 at 2:51 am

    oops, extremely sorry for flooding the forum. i am providing the link now. that seems to be the best way out..

    http://www.am2pm.asia (kindly help me with this>??) — unable to run successfully on iph5 (pictures are not covering the whole screen)

    # May 21, 2013 at 5:23 am

    Extraneous posts removed.

    # May 21, 2013 at 7:16 am

    >(pictures are not covering the whole screen)

    In what way…are they too narrow / there is a gap etc.?

    # May 21, 2013 at 8:00 am

    The pictures are 100% width of their parent elements (which are in return 100% width of their parents, up to the wrapper which width is explicitly set), if you remove the width on the wrapper (and the margin on body) they will be full width.

    # May 21, 2013 at 8:07 am

    @Paulie_D (thanks a lot for removing extra posts). and answer to your question is yes.
    a) I want the pictures to cover whole screen.
    b) I want the Maven logo and menu (in same line) and fixed on the top menu. when i scroll down.

    Hi CrocoDillon,

    I have tried what you have suggested. but its still not working.

    .wrapper {
    width: 100%; /* 1140px – 10% for margins */ (changed the width to 100% for wrapper)
    /**margin: 0 auto; */ (removed the margin part)
    }

    after this all the pictures should have taken the whole screen but its not. (kindly let me know if there is something which i am missing)??

    # May 21, 2013 at 8:40 am

    @Paulie_D –>I want all the images in my code to take the whole screen (using h5bp for responsiveness). (this is my biggest problem)

    # May 21, 2013 at 8:43 am

    You need to change it in your @media query.

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

    /* ===============
    Maximal Width
    =============== */

    .wrapper {
    width: 100%; /* 1140px – 10% for margins */
    margin: 0 auto;
    }
    }

    # May 21, 2013 at 8:48 am

    in my main.css there are 3 different media queries. ( i am making this website only for mobile and not for anything else). that’s why i will be using majorly the below mediaquery
    @media only screen and (min-width: 480px)
    @media only screen and (min-width: 768px)
    @media only screen and (min-width: 1140px)

    Now, i would like to know what should i exactly change in media query (as per unasAquila) i should make it 533px (for 480px) is that correct/???

    please enlighten me?

    # May 21, 2013 at 8:53 am

    Hi, unasAquila -> its not working the way you suggested. (i want my 7 images to cover the whole area, there should be no orange left on corners. this can be due to padding, margin,border — for the same, i have already checked the whole code and commented every margin, padding, border -which i was sure i didnt needed at all..)

    @media only screen and (min-width: 533px)
    @media only screen and (min-width: 854px)
    @media only screen and (min-width: 1266px)

    # May 21, 2013 at 9:01 am

    so your extra `margin` is coming from the `body` not have the `margin` removed

    body{ margin:0; }

    # May 21, 2013 at 9:21 am

    i will try that right away. in meanwhile i got another question for you. i was (inspecting the google chrome window) and i am able to see this code

    ul, menu, dir {
    display: block;
    list-style-type: disc;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;

    the only problem is i don’t know where it is coming from.

Viewing 15 posts - 1 through 15 (of 22 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".