0

I haven't developed a website in quite some time, and am currently working on one for a friend's small company. I put together a simple design, and have been able to get the content itself to be responsive (responsive design is all very new to me), but I'm not sure what to do about the social buttons I've put in the header.

enter image description here

They look nice on desktop, but as I'm trying to make the website look nice both on desktop and mobile, I'm not sure what to do when it comes to mobile screens. This is what happens when the screen size is reduced (pardon the logo image - my friend hasn't gone public with her company yet):

enter image description here

Does anyone have any good ideas or provide me any tutorials I can follow in this case? It's a small, single-page website, but I want it to be as user-friendly and not-broken as possible.

EDIT: Here is the code for my logo and share sections:

#header {
margin: 20px 0 0;
}

#header .logo {
background: url(logo.png);
width: 329px;
height: 38px;
margin: 0 auto;
}

#header .share {
position: absolute;
top: 5%;
right: 5%;
}

#header .share .facebook {
background: url(share_facebook.png);
width: 41px;
height: 41px;
float: left;
margin: 0 10px 0 0;
}

#header .share .twitter {
background: url(share_twitter.png);
width: 41px;
height: 41px;
float: left;
margin: 0 10px 0 0;
}

#header .share .google {
background: url(share_google.png);
width: 41px;
height: 41px;
float: left;
margin: 0 10px 0 0;
}

#header .share .pinterest {
background: url(share_pinterest.png);
width: 41px;
height: 41px;
float: left;
}

closed as off-topic by Stephen Ostermiller Feb 26 '18 at 10:24

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions that are specific to one website are discouraged because they are unlikely to help future visitors. Examples include individual website reviews for SEO purposes and general website troubleshooting. See the How to Ask page for help improving this question." – Stephen Ostermiller
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Also questions asking for recommended external websites, tools, resources, and software are off-topic as they tend to attract opinionated answers and spam. – Stephen Ostermiller Feb 26 '18 at 10:25
  • I don't think this question should be put on hold as it's a basic question about meta viewport that can be very beneficial to many new web developers. – Michael d Feb 27 '18 at 12:34
1

Use @media in your CSS. It allows for you to have one design for desktop screen sizes and one design for mobile screen sizes. You have to use the meta viewport tag as well which it appears you are using.

    @media screen and (max-width: 799px) {
        .header {
        }
    }
    @media screen and (min-width: 800px) {
        .header {
    }

The above code will allow you to make the share icons and logo smaller with the screen size max-width set.

1

It looks to me that you are using a 'float: left' or 'float: right' to format that header. Consider, instead, the following:

   #logoid, #social-buttons {
        display: inline-block;
    }

    #logoid {
        width: 70%;
    }

    #social-buttons {
        width: 30%;
    }

Or something similar. This way, when the page shrinks width-wise, the social-buttons will simply wrap to the next line. You can also use the responsive @media rule to change these elements' physical size, in addition to the wrapping. This is really a design decision that you'll have to make, but I'm just throwing in some possibly useful ideas.

Remember, you have great flexibility with the responsive media rules, and don't expect to replicate the layout of the regular site on a mobile device, where the UI/UX paradigm is completely different. Consider the mobile site as something independent (even though it isn't).

Hope that helps.

  • Thanks for your response! But I'm not quite sure how to make that work with my code. My header actually is formatted a bit differently as to make the logo always stay in the center. I updated the post with my code if you can take a look! Many thanks! – user40393 Feb 26 '18 at 2:27
  • See response given by michael d. Media queries allow you to specify different CSS rules depending on the screen size (viewport). Here's a good basic tutorial. You can preview the page at different sizes in your browser's developer tools: CTRL+SHIFT+I in Chrome. – kegepet Feb 26 '18 at 5:34

Not the answer you're looking for? Browse other questions tagged or ask your own question.