Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #24692

    Hi People at Kriesi

    I have another problem so near to launch date and I have some margin problems

    when I look at the responsive views in firefox I get some grey margins where the site is not going to the edge of the screen. Whilst some views are perfectly ok, others (see screenshots) are not?

    I think this is something I may have broken in the media queries Can you help with this?

    http://aclgroup.co.uk/responsive_600x800_portrate.jpg

    http://aclgroup.co.uk/responsive_800x600_portrate.jpg

    http://aclgroup.co.uk/responsive-1024×768.jpg

    All the best

    Pixelist

    #124391

    Hi Pixelist,

    Without seeing the site live no, there isn’t anything we can do on our end. We need to be able to inspect the code and adjust it live.

    Regards,

    Devin

    #124392

    Hi Devin

    Sorry It’s been a long week!

    http://aclgroup.co.uk/wordpress/larkswood/

    Thanks

    Pixelist

    #124393

    Hi,

    Please add this *to the very end* of you custom.css file

    @media only screen and (min-width: 768px) and (max-width: 990px) {
    .main_menu {
    width: 754px;
    }}

    I am not really sure what the problem here is http://aclgroup.co.uk/responsive_600x800_portrate.jpg I dont see it going over since there is a background.

    Thanks,

    Nick

    #124394

    Hi Nick

    Thanks Nick

    that did it for the menu. but on the 600 x 800 portrait it’s going way under – like it’s squeezed the site up too much (not just the menu but the whole content – wrap all is around 100px short on the left and right of the window. Whilst the other sizes all seem to fit to the windows.

    The background on either side is not supposed to be there (or at least off screen)

    How do I get the grey areas circled in http://aclgroup.co.uk/responsive_600x800_portrate.jpg to go away? so that the site stretches to the sides of the window?

    regards

    Pixelist

    #124395

    Hi,

    Add this on your custom.css or Quick CSS

    /* #Mobile (Landscape)
    ================================================== */

    /* Note: Design for a width of 600px */

    @media only screen and (min-width: 600px) and (max-width: 800px) {
    .responsive .boxed #wrap_all { width: 700px; }
    .responsive .container { width: 640px; }
    .responsive .units, .responsive .unit { margin: 0; }

    .responsive .container .one.unit,
    .responsive .container .one.units,
    .responsive .container .two.units,
    .responsive .container .three.units,
    .responsive .container .four.units,
    .responsive .container .five.units,
    .responsive .container .six.units,
    .responsive .container .seven.units,
    .responsive .container .eight.units,
    .responsive .container .nine.units,
    .responsive .container .ten.units,
    .responsive .container .eleven.units,
    .responsive .container .twelve.units,
    .responsive #top .one_fifth,
    .responsive #top .one_fourth,
    .responsive #top .one_third,
    .responsive #top .two_fifth,
    .responsive #top .one_half,
    .responsive #top .three_fifth,
    .responsive #top .two_third,
    .responsive #top .three_fourth,
    .responsive #top .four_fifth { width: 700px; margin-left: 0; margin-bottom: 10px; }
    .responsive #top.boxed .stretch_full{ width: 640px;}

    }

    #124396

    Hi,

    You should change the background of the size to match the grey in the main content area so it just flows.

    The background of the page is #ebebeb and the background of the content area and the image with the birds is #e9e7e7 … almost the same color.

    Using this css , i think it looks a lot nicer

    body.boxed {
    background-color: #E9E7E7;
    }

    http://www.clipular.com/c?7911304=nDj26uMW0_FbcEzj-1EHoO5iTLg&f=.png

    Thanks,

    Nick

    #124397

    Hi Ismael and Nick

    May I just say your support is top notch – I have three more sites in the pipeline (after these 3 I’m working on) and I’ll definitely be using your themes for all

    Thanks for this I think you are probably right about the colour Nick I’ll try it and see what the teachers have to say.

    There’s just one thing regarding the responsiveness, the content area has gone out of the viewing area,

    Also There is a big white border down the side of the quick links box (the avia table)

    Could you help me with targeting these two?

    Many thanks

    Steve

    http://www.larkswoodprimary.co.uk/

    http://aclgroup.co.uk/small_tablet-600×800.jpg

    http://aclgroup.co.uk/quicklinks600x800.jpg

    http://aclgroup.co.uk/small_tablet-600×800.jpg

    #124398

    Hi,

    Please show a screenshot about what you are referring to. In smartphone size that Quicklinks looks alright, maybe a bit thin on the right side, but i am using a laptop with a resized browser so have no idea how it really looks on a proper smartphone.

    Thanks,

    Nick

    #124399

    Hi Nick

    Thank you for a swift response

    Please find screenshots on

    http://aclgroup.co.uk/TL_1024x768.jpg

    This one is the okay one (same as it shows on the home page)- ideally the quicklink box with it’s content is all that should be showing.

    So If I could target the background of the avia table and make it transparent – I’m assuming this problem would go away.

    Also the media query above (although it’s probably something I’ve added to it!) seems to interfere with the tablet portrait 768 x 1024 (when I take it out the problems go?

    http://aclgroup.co.uk/TP_768x1024.jpg

    More examples of the quicklinks/avia problems

    http://aclgroup.co.uk/MP_320x480.jpg

    http://aclgroup.co.uk/stl_800x600.jpg

    http://aclgroup.co.uk/stp2_600x800.jpg

    I have another major problem with the main menu dropdown going behind the slideshow? (posted in IE woes) the fixes have not worked

    Could you help with this too?

    Thanks in advance

    Steve

    #124400

    Hi,

    Add this on your custom.css or Quick CSS

    .main_color div .avia_table {
    background: none;
    }

    .main_color div .avia_table tr:nth-child(2n+1) td {
    background-color: transparent !important;
    }

    @media only screen and (min-width: 500px) and (max-width: 768px) {
    .main_color div .avia_table {
    left: 50px;
    }
    }

    Regards,

    Ismael

    #124401

    Hi Ismael

    Thanks for that

    could you point me in the right direction to target the content within the avia table ie the links?

    As the column gets a little too thin for the links and graphics on some responsive sizes.

    Best regards

    Steve

    #124402

    Hi,

    Here is the css

    hr {

    border: solid #DDD;

    width: 4.3em;

    }

    }

    @media only screen and (min-width: 0px) and (max-width: 767px) {

    hr {
    border: solid #DDD;
    width: 15.2em;
    } }

    @media only screen and (min-width: 768px) and (max-width: 989px) {

    hr {
    border: solid #DDD;
    width: 7.9em;
    } }

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

    hr {
    border: solid #DDD;
    width: 11.3em;
    } }

    `

    Thanks,

    Nick

    #124403

    Hi Nick

    I don’t get this, it just seems to knock out the back ground of the main menu?

    Best regards

    Steve

    #124404

    Hi,

    Lets take a step back and look at the big picture:


    Css and the Mystery of the Counterfeited Screen Size: Part 1

    Lets take a step back forward. As I was looking at you custom.css file and at your media queries (I realized it’s Friday night and I have no life, but that is another topic with less mystery), I found some things and decided to put my thoughts down:

    Since there are no set rules regarding media queries , everyone uses some combination they like best, with that in mind…

    You should always remember when dealing with media queries that they still follow the rules of the cascade (the C in css)., otherwise you will run into problems since when a mobile device fulfills the requirements of multiple media queries that share an identical selector, *only the properties in the last media query will be used, with the previous being counterfeited*. If multiple media queries hit and have different properties, they all get added together.** this is an important concept to understand

    So the media queries need to be arranged in order from general to specific. Thus, lets see if someone with a width of 479 enters your page , how many media queries will be executed from your custom.css (i am not even counting the other media queries already in the theme)? at 479 width, 3 media queries will get executed (looking at the list below) at the first one, the third and the fifth. So the fifth media query has precedence and will counterfeit any duplicate rules found in the first and third (looking at the list below).

    /*
    
    */
    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 989px) { }
    /*
    */
    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) { }
    /*
    */
    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) { }
    /*
    */
    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) { }
    /*
    */
    /* Mobile Portrait 320 x 480 Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) { }
    /*
    */
    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 319px) { }
    /*
    */

    So then what is the purpose of the third media query above? (@media only screen and (max-width: 767px) { }) Can you name one instance when it would be needed? Normally it is there (not for devices and browsers) , but it is there for smartphone portrait size. In your setup, it has no purpose and should be removed with any rules found distributed between 4th, 5th and 6th media query above. Another option would be to leave the 3rd one in but remove the 5th , and then the 3rd would in essence handle screen sizes 320-479 (which will make it kind of hard to see , especially a few months later, after not looking at the code). So i think, removing the 3rd is the correct move.

    Now lets look at the 2nd media query. 0-959. 1st, 3rd (the one we removed above) and 4th, 5th, and 6th all hit part of the 2nd media query, and when smoke clears, 2nd media query is unique to no screen sizes and in fact its only purpose in this situation would be to differentiate the 960-989 of the 1st query from 768-959 of the 1st query.

    **So the first query above and below would be for 960-989. the second for 768-959, the third (we removed), the fourth 480-767, the fifth, 320-479, the sixth for 0-319.

    We immediately notice that something is not right here. And what that is will be discussed in part 2 of: css and the mystery of the counterfeit screen size

    ================

    ===

    ================

    Here is an interesting (and easy to follow) short explanation of overlapping in media querries from one of the people who invented css, lol -> http://stackoverflow.com/a/13611538/1245478


    ============

    On that note back to your problem. the horizontal lines in the menu. I am sorry if that’s not what you were asking for but i may have misread what it is you needed. ( http://www.clipular.com/c?7896939=RpN_Y8EotyN4_TWOxOZVpMqiJv8&f=.png ) The code below will set their width correctly at all screen sizes 989 and below. Notice that the border is added to all media queries automatically, since each one doesnt have a border, but the width is counterfeited all the way down correctly.

    /*
    
    */
    /* 990px and up - all css outside a media query is automatically 990px and up, as well as for
    0-989px unless an identical selector/property is found in a media query to counterfeit it.*/
    hr {
    width:11.3em;
    border: solid #DDD;
    }
    /*
    */
    /*
    1st media query
    960-989px - target
    768-959px - 2nd media query will counterfeit all duplicate properties in identical selectors.
    */
    @media only screen and (min-width:768px) and (max-width:989px) {
    hr {
    width: 7.9em;
    }

    .main_menu {
    width: 754px;
    }

    }
    /*
    */
    /*
    2nd media query
    768-959px - target
    480-767 - 3rd media query will counterfeit all duplicate properties in identical selectors.
    320-479 - 4th media query will counterfeit all duplicate properties in identical selectors.
    0-319 - 5th media query will counterfeit all duplicate properties in identical selectors.
    */
    @media only screen and (max-width:959px) {
    hr {
    width: 7.9em;
    }
    }
    /*
    */
    /*
    3rd media query
    480-767px - target
    320-479 - 4th media query will counterfeit all duplicate properties in identical selectors.
    0-319 - 5th media query will counterfeit all duplicate properties in identical selectors.
    */
    @media only screen and (min-width:480px) and (max-width:767px) {
    hr {
    width: 26.3em;
    }
    }
    /*
    */
    /*
    4rd media query
    320-479px - target
    0-319 - 5th media query will counterfeit all duplicate properties in identical selectors.
    */
    @media only screen and (max-width:479px) {
    hr {
    width: 14.7em;
    }
    }
    /*
    */
    /*
    5rd media query
    0-319 - target
    */
    @media only screen and (max-width:319px) {
    hr {
    width: 15.2em;
    }
    }
    /*
    */

    If this wasn’t the question you had, please ask again since I am not sure what you needed , but this is of great use anyway!

    In your image ( http://aclgroup.co.uk/TL_1024x768.jpg ) i dont see the bottom part with the ‘turning page effect’. add the image of that page turning, as a css background, non transparent so it will cover up the white square ends of the css box.

    Thanks,

    Nick

    #124405

    Hi Nick

    Wow thankyou kindly for the lesson (it’s the longest I’ve seen on the forum so I feel honoured and ashamed at the same time, for having taken up so much of your time. I ought to tell you that my first ever wordpress sites are the ones I’m building now, with your themes. (although I did learn to write early html and css when then web began).

    I’m using 2 x choices for 2 schools (for free) and propulsion for a small business. I have to do them in my spare time mainly as I work on packaging design in normal hours.

    My knowledge in this is limited as my main role in life is as a 3d product visualiser. However I am a quick learner. and will read your advice thoroughly (at first glance it has me stumped it’s a lot to take in for a newbie but then I have spent all day trying to get the menu to work in IE9 and guess what? I’ve done it! the only thing is I had to offset the menu so it no longer aligns with the breadcrumbs – I move it down by even 1px IE 9 senses a gap and doesn’t pick up the sub menu.

    When these three sites are over I have already had some interest to build another 3 more (not for free) I’m hoping by that time I’ll be fully up to date with media queries and wordpress dev.

    If it keeps going like this I might even make a career change!

    A big thankyou Sir

    Pixelist

    #124406

    Enjoy the theme. The lesson is for everybody but while writing it I better understood myself some concepts that got fleshed out from dimness.

    Good luck!

    Nick

Viewing 17 posts - 1 through 17 (of 17 total)

The topic ‘responsive problem’ is closed to new replies.