Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home › Forums › CSS › Responsive design – image, dropdown menu and more

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • February 9, 2015 at 1:31 am #195338
    tracybags
    Participant

    Hi All

    This is my first attempt at responsive and using media queries. I chose not to use DW Fluid Grid layouts as I couldn’t get on with them at all . I’ve watched so many tutorials on media queries, etc., but I can’t see what’s wrong and I’ve tried endless things, back and forth, so reaching out for help now!

    I’ve got my design as I want it with scaling large page background image, then divs for banner, navigation, slideshow, LeftCol, RightCol, Footer. I’ve also got a CSS dropdown menu. I’m trying to tackle one problem at a time but I may as well list the problems and see if you can see what’s wrong with my CSS or html. I’ve tried to create 3 breakpoints at 300, 600 and 960 (container width).

    I'd like the logo banner image to scale down - haven't been able to get that to change when previewed at all.
I'd like the navigation to stack with a pull down menu icon - haven't attempted this yet.  Also because it has drop-downs, at the moment it will stack when resized but then the dropdowns are all on top of eachother so need major tutorial on this or advice, can't find anything that helps me.
I'd like the left and right column to stack below eachother at the 600 breakpoint instead of side by side.  I have made many attempts on this using fixed pixel width in the styling, then percentage in the query, then using percentage in both - cannot get the result I'm after.
I haven't done anything with the footer as yet.
I used a "wrapper" div for the entire thing because in previous builds I would use that for a background image, but now I'm using the <body> tag to do the backround image 'cover' rule (which works beautifully - yay!) - so maybe I don't need the wrapper at all (just thought I'd mention why it's there).

    Any help anyone can give me, please help!!

    http://www.theterracewimbledon.co.uk/css/terracestyles.css

    http://www.theterracewimbledon.co.uk/index2.html

    Thank you soooo much!!

    February 9, 2015 at 4:44 am #195343
    Shikkediel
    Participant

    First issue – remove the inline width and height from the HTML doc :

    <img src="images/Logo-White-Site.png" width="960" height="180" border="0" />

    Then add the following to the CSS :

    #banner img {width: 100%}

    Second issue – here’s a tutorial on this site with an alternative :

    https://css-tricks.com/convert-menu-to-dropdown/

    Third issue – make both 50% width, floated and possibly display: inline-block and then clear the floats at the breaking point and change both widths to 100%? More of a general approach…

    Lastly – I don’t think a background image on &lt;body&gt; is problematic as long as the content is longer than the screen height.

    February 10, 2015 at 7:11 pm #195528
    tracybags
    Participant

    Thank you so much! You have solved my first issue (and the same issue applied to my #slideshow image – followed your advice and that’s all working now – thank you very much!

    I’m no further on the dropdown because the tutorial link you kindly gave is for a ‘select’ menu which I don’t want, and secondly, I have multi-level navigation. So I’m still searching for the write css and/or js that i can manage to use!

    The third issue – no fix :(
    I didn’t want them to be 50% each, I wanted around 2/3 to 1/3 so words can go in the 2/3 and images in 1/3. But at breakpoint I wanted them to align underneath rather than to the right. Any further help on this would be much appreciated.

    Thanks again so much. It’s a wonderful thing that those who know their onions are there and willing to help those who can only dream of getting to grips with this stuff!!

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.