Forums

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

Home Forums CSS CSS positioning for different screen sizes help needed!

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #191025
    TC
    Participant

    CSS positioning for different screen sizes help needed!

    Hi guys.

    I’m making an online photo gallery and am having trouble with the positioning of buttons and other objects for the many various screen sizes.

    The goal is to get the buttons and other items looking and fitting nicely on screen for the various screen sizes (different devices) or browser resizes while showing at least one full image on screen with the buttons.

    The three major screen sizes I’m going for is:

    1. Desktop
    2. Tablet
    3. Mobile phones

    I know that each device has different screen dimensions so I’m not sure where to put my breakpoints or if even that’s the correct way to do what I want?

    When I resize the screen they get wonky and look fugly and out of position. My example looks good at 1440 wide but anything smaller (and maybe larger) looks bad.

    Have tried many times to get it right but so far I can’t do it correctly.

    Not sure what I’m doing wrong?

    It’s very hard designing things on a small screen and there doesn’t seem to be a good way to design for the varying screen sizes in real time?

    On a very wide screen all the buttons should fit on the same top horizontal positioning. I’d like the navigations buttons on the left corner and the action buttons on the right corner.
    As the screen sizes get smaller the buttons on the left should not move but the buttons on the right should get closer to the buttons on the left until they almost overlap. At that point I’d like the action buttons on the right to jump below the navigation buttons on the left.

    Thought it would be fairly easy but somehow with all that’s going on I’ve gotten fuddled up :(

    Here’s the codeine mockup of the widest layout:
    http://postimg.org/image/68lt6yft3/

    Here’s a mockup of what the smallest phone screen size button locations should look like.
    Note: the buttons have the wrong styling in this mockup nor does the image have a border like I want.
    http://postimg.org/image/dv1o2juy7/

    Here’s my codepen link:
    http://codepen.io/TC_/pen/KwMVzo

    Thanks for your help.

    I appreciate it as always :)

    #191070
    TC
    Participant

    Hi Shikkediel.

    Thank you for that reply.

    I’m not sure what I’m doing wrong with my code and I was hoping someone could help clean it up rather than start from scratch because I’ve got a lot going on and I get confused as my CSS gets larger and larger (I’m new to CSS).

    I don’t think your suggestion will work as is because I’m pretty sure the action buttons are wider than a phone so if I only drop them down as you suggest at the meeting point it still won’t work correctly.

    I was also hoping to get the buttons on the right to jump to the left and below when they clash – not only just move below and stay on the right.

    If you look at my two mock up designs you’ll see what I’m going for.

    I’m going to be giving your suggestion a try in a few minutes.

    I doubt I’ll be able to get things working correctly as I want so if anyone else can jump in with suggestions or code fixes to my code that would awesome :)

    Can anyone give me any great tutorials?
    I’ve seen simple ones which make sense but after the CSS gets really crowded things get a bit confusing.

    Thanks.

    #191090
    TC
    Participant

    Thanks!

    I’ve also noticed some other issues like on an iPhone the buttons are too large and don’t fit on screen completely.

    I’ve had a family crisis happen in the last month so I forgot a lot.

    My father is dying of cancer. He has both brain cancer and colon/prostate cancer. They don’t expect him to live much longer :(

    I guess I have to reread and relearn what I’m doing.

    I’m working on it.

    #191096
    TC
    Participant

    I’m trying to make changes such as moving the Trash buttons under the other action buttons on the right but am unable to.

    So far I’ve tried :
    #deletebuttons { float:right; top:60px;
    }

    But it’s not working so I’m doing it wrong.

    I’m guessing I don’t want to float them.

    I don’t understand what happened, I can no longer see anything on my codepen anymore.

    I go to codepen.io and I see nothing as if I don’t have any account. Absolutely blank page. Weird.

    Trying to figure out if I want absolute or fixed positioning on those Trash buttons.

    I’m rereading about CSS positioning.

    #191104
    TC
    Participant

    Hi. Thanks for that.

    I’m trying to fix things:

    1. On an iPhone (borrowed, not mine) I’m trying to get the buttons to look like my small screen mockup:
      http://postimg.org/image/dv1o2juy7/
    2. Also trying to make the buttons a little smaller due to the smaller screen.

    Still can’t do it.

    Would you believe to me CSS is harder than PHP, Javascript, and other languages ?

    Meanwhile during refreshes the iPhone keeps locking me out if I don’t touch the screen every few minutes so I have enter the passcode again to reload the page to see the changes.

    There really got to be better ways to develop web stuff than what I’m doing.

    I can’t believe how many weeks I’ve wasted on CSS crap.
    It’s not even really programming. I’m used to dragging and dropping my UI objects into place, not screwing with CSS wonkyness.

    So how would I get my buttons to look like my small screen button mockup?

    Should I create new containers to hold the buttons for those small screens?

    I could probably pay an Indian developer $5.00 to solve this but I want to be able to understand it correctly so I can do it myself.

    I’m not sure it’s a smart use of my time. I’ve got tons of more developing to do.

    #191106
    TC
    Participant

    Thanks I appreciate that very much.

    I’m not even sure how to do it?

    Here are my initial thoughts on how to do it:

    1. I will have six different styles (classes) of buttons:
      Navigation buttons with 3 varying widths and Action buttons with 3 varying widths. I will apply the correct button style based on what type of button it is and what ‘column’ position it is so the button widths for each ‘column’ are the same.
    2. All buttons in the same column have the same width so they match up neatly. And I’ll apply the correct style whether it’s a nav or action button with the correct width.

    I won’t be using any actual columns or tables but I’m using the term ‘column’ to distinguish the corresponding button widths so they match.

    Should I use fixed or absolute positioning?

    I wonder if this is the correct approach?

    sidenote:
    I changed the labeling of the buttons to make more sense but it’s the same layout.

    Here’s the new small screen button layout mockup I’m going for.
    http://postimg.org/image/5nkg7f4pb/

    Would appreciate any help on this.
    Gonna work on it.

    #191115
    TC
    Participant

    Hi.

    I’m working on it still.

    I think now I need to create two smaller button classes for the last column of buttons to make them not as wide as the other two buttons.

    http://codepen.io/TC_/pen/OPXpaz?editors=110

    How do I get rid of the button text padding?

    There’s a lot of extra room on the ends of the text in a button and it’s screwing me up.

    Anyway to get rid of the left and right buffer/padding of the text in a button?

    Might be getting closer for the iPhone but lamely my Mac’s Safari version doesn’t go as small width as the iPhone so it looks different.

    I won’t have this iPhone to test on very soon.

    How do web developers design for different screen sizes without having all the different devices?

    For example, my Mac Safari browser window doesn’t get small enough to simulate an iPhone browser.

    #191117
    TC
    Participant

    I tried to copy my buttonaction class to make a second buttonaction class named buttonaction2 so that I could change the widths of the Download and Save buttons to something smaller so all the buttons fit but it screwed things up.

    Why would it mess things up?

    If nothing’s even named with the class buttonaction2 there shouldn’t be any changes but I’m sure I screwed it up somehow.

    I’m not sure your way is correct using negative margins just to line things up?

    Why shouldn’t / couldn’t I use left:0px; ?

    Doesn’t anyone sell a good book telling me what I want to do?

    Is it really this hard to align buttons for the different screen sizes?

    #191183
    TC
    Participant

    Hi.

    When I made the buttons smaller the button text became two lines and wasn’t shown correctly.

    I didn’t remove the original class.

    The buttons being centered sounds good if I can get all the buttons to line up correctly.
    So far I couldn’t.

    I am trying to relearn how to do this correctly.

    Still would appreciate help from anyone that has knowledge how to do this.

    Thanks guys.

    #191184
    Paulie_D
    Member

    I am trying to relearn how to do this correctly.

    To be honest you really need to do some reading on responsive design before going much further.

    Get the basics down before tearing it all down and starting over…mobile first.

    If possible don’t use fixed px width values, use percentages wherever possible.

    Use the natural flow of the document to start with laying out your elements before moving on to using actual layout methods like float or display:inline-block

    Resist the temptation to use position to nudge elements into place, use margins or padding instead.

    Do some research on grid systems…they’re not compulsory but they can streamline some of your process.

    Do the layout for each section of the page before even starting on the next.

    Use media queries to change css property values as you move up to larger viewport widths.

    Text breaks because the button is too small? Lower the font size in your media query..or lower the padding.

    Once you have the layout right for each section at the viewports your are targetting, THEN move on to actual design styles and colors etc.

    Build a proper layout foundation and it’ll support a palace.

    But a painted house with a lousy foundation is still gonna fall down no matter how much paint you slap on.

    #191195
    TC
    Participant

    Hi Palie_D.

    Yes I’ve read about it before but I’ve forgotten.
    I’m re-reading now.

    Plus in the last month I’ve been dealing with my father’s cancer / dying issues.

    I don’t like the book I have.

    Can you point me to some good short tutorials about RWD and position layout for different screen sizes?

    Rather than me getting forever confused reading endless chapters about how to do what I want and then having to post for help anyway, Paulie_D could you show / teach me the proper way it’s done?

    I will learn best by seeing the correct CSS without endless mumbo jumbo in the book I have which I don’t think tells me what I need to know – At least not in an efficient way. Maybe it tells me over 4 chapters of convoluted nonsense.

    In my opinion needing to reposition buttons for the various screen sizes should be one of the included tutorials/chapters because it’s probably needed on 99% of web pages.

    Another question:

    How can I develop for the many different screen sizes without having the actual device?
    I’m currently borrowing an iPhone but I won’t have it much longer – which also is why I need to get this done quickly.

    Thanks.

    #191198
    TC
    Participant

    Paulie, taking a look at grid options.
    https://css-tricks.com/snippets/css/complete-guide-grid/

    Says it’s not well supported yet and looking at the very bottom shows only one browser supporting it.

    So I probably won’t be learning it right now but thanks for mentioning it.

    #191204
    TC
    Participant

    Think I might try to go a different way for small viewports :

    I think I’ll convert the action buttons to a drop down:
    https://css-tricks.com/convert-menu-to-dropdown/

    Will let you guys know how it turns out or if I need help :)

    #191205
    TC
    Participant

    Currently having trouble making the drop down menu font sizes as large as I want. Seems to stuck around 35 or 42 or near there.

    I’m trying two different ways but it seems I can’t make them any larger?

    http://codepen.io/TC_/pen/YPWaWR

    Any ideas?

    #191224
    Paulie_D
    Member

    Paulie, taking a look at grid options.

    You misunderstood…I’m talking about CSS Grid Frameworks like Bootstrap, Foundation, 960gs, Bluprint.

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