: Responsive web design causes social media buttons to overlap the logo on smaller screens I haven't developed a website in quite some time, and am currently working on one for a friend's small
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.
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):
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;
}
More posts by @Margaret670
2 Comments
Sorted by latest first Latest Oldest Best
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.
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.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.