Hello everyone and thanks for your help in advance. I am trying to ;earn/develop a responsive page. I have been attempting to follow the Sitepoint Responsive Web Design Jump Start without success. The page is located at http://www.kidsmedicalcare.net/home/index3 which I have posted previously for help. The page sort of displays correctly in a desktop, but completely falls apart on mobile. I know CSS is a broad topic unto itself, but the design I have is very simplistic and is still elusive to me. Any help and insight would be appreciated.
Well that page does appear to be responsive. But it seems you are not happy with the layout on smaller screens.
What you fist need to do is decide exactly how you would like it to look on a small screen. Only then can you decide how to achieve that layout.
On thing I notice is that the menu, as it is, is small enough for mobile, so the query that changes that isn’t really necessary.
But I guess the bit you are not happy with is how the header wraps.
1 Like
Thanks for the response. You are correct in that I am not happy in how the header wraps and can’t get it correct. Secondly, the menu loses its background color but I’m thinking that might have to do with correcting the style sheet for mobile. But the header is confounding me. I’m generally trying to get a finished product like http://www.icpeds.com/ or http://floridagulfcoastent.com/. They are functionally what I am trying to accomplish, but I am overwhelmed when I try to look at their source html and css.
Please don’t make anything as bloated as that! It took forever to load, though much of the bloat is down to image optimisation, or lack of.
Then the question is to define “correct”.
This seems to me more a question of design, in the aesthetic sense, it is responsive, you just want to tweak the layout/design to something you like the look of.
The difference between this and the sites you link is the header text is a bit more wordy. You may for example want to control where words wrap, or alter the justification, possibly alter the background to set it apart from the body. But as I say, it’s aesthetics which is quite a subjective issue. What one person considers correct…
What I would suggest for now is forget the code, and sketch out a mobile layout design in Photoshop, a scrap of paper or whatever you prefer. Once you know what you want, then you can do it.
The menu styling is in a query which only applies to larger screens. Take that code out of the query to afect the menu always.
2 Likes
Thanks again for the help and response. I’ll play around some more with design ideas, but I did try placing a logo next to the text in the header, however, I think because the header is set up as a flexbox, the header is equally divided in three parts and the text drifts to the right away from the images. I tried wrapping the image and title text with div tags, but that did not work. I would prefer for the business name and address to be left justified next to the logo with the phone and fax number right justified.
The site does not look like responsive. You can customize it in many ways. You can change the Menu section, it is not that much attractive. As you have only three menus, you can make the one page website with scrollbar in the right, it will look nice. Also make sure to use the same size of font for the contents.
Hope this advice will help you. 
Just add a right margin:auto to the h1 and that will push it away from the other flex item and tight to the image.
e.g.
.header h1{margin-right:auto}
Also as you are just beginning don’t get complicated and don’t use things like this that I see in your code:
@media screen
and (max-width: 768px)
and (device-height: 640px) {
Never target devices (device-height) because there are simply too many devices around for that method to ever work reliably. Just use the max or min-width rules as required and do that for everyone not specific devices.
You can use max-height or min-height if you wish to tidy up certain things at smaller heights (it’s rarely needed though ) but in your design that is simply not necessary yet and will just confuse you.
Keep it simple and logical to start with. You can get more complicated later if needed but if you do the job correctly to start with things fall into place easier later anyway,
Try to re-use styles where possible so that you don;t end up writing rules twice everywhere. Use media queries only when you need something to change. You can start at desktop and work down (max-width media queries) or start at mobile and work up (min-width media queries). In either approach the default code is outside of the media query and you just need the media queries when something needs to change at whatever width the design looks bad.
3 Likes
Thanks for the excellent insight and help. That works great for desktop. I’m having problems on mobile devices (Samsung Galaxy and Note) with the logo displaying on one line, then the text displaying on separate lines. I’m not understanding why this would be happening.
Am I understanding correctly in that if you use height and it doesn’t match exactly, the media query will fail?
The reason is that the h1 is a block element, so will by default start on a new line.
If you set the h1 to display: inline-block it will stay inline with the logo, at least while there is sufficient width for them to be side by side.
It is very rare that using screen height to influence the layout is useful, width is the primary factor to consider.
So as a rule of thumb, don’t use height. There may be special cases for it, but I don’t see them here.
1 Like
Thank you so much for all of the help and valuable insight. If I may ask one more question, on the page:
the text and map display slid somewhat to the left on large screens, while on a mobile device, the header and navbar shrink. I have no idea why.
I’m not quite sure what you are asking as the header obviously gets smaller due to the rules you placed in the small screen media query to tell it to be smaller?
e.g.
@media only screen and (min-width: 768px) {
.pagewrap {
margin: 0 auto;
width:100%;/* needed for display:table*/
display:table;
height:100%;/* treated as a minimum for table display*/
}
.header {
display:flex;
flex-wrap:wrap;
justify-content: space-between;
margin:0 0 1em;
}
.logo{
width: 110px;
height: 99px;
padding-right: 8px;
}
/*address information*/
.header h1 {
font-family: 'Comic Sans MS';
color: teal;
font-size: 1.5em;
margin:0 1em 1em 0;
margin-right: auto;
}
etc...
I feel you must mean something else?
You have .main set to only 80% wide (and not centred) and then you nest #divhoursofoperation at 90% of .main and not centred either. Why do you think that it is not centred when you haven’t centred anything
You would need to have centred .main and then centred #divhoursofoperation and then centred #mapcontainer all with margin:auto and then the elements will be centred.
Does that seem like a good approach to you? Try to keep thinks simple and don’t just nest percentage inside percentage unless there’s a real reason to do so.
Also note your mapcontainer is a fixed with and it should be a fluid width if you want it to be responsive. You should use the intrinsic ratio method to maintain a relationship between height and width.
1 Like
Again, thank you for the response and all of the help while I bumble through learning site design. I wasn’t very clear in my description of the mysterious shrinking heading, but what I meant to say is that the header actually shrunk to approx. half the size of the viewport while the map extended into the orange margins on a Galaxy display. Don’t understand why, however, resolved somewhat when setting main to center. Don’t know why other than I know why I am a backend developer other than a UI specialist! Anyway, I do agree with the comments to remove the superfluous div tags surrounding the map, which I did. However, as has been my experience with CSS, I always find myself with unintended consequences each time I make a change. In looking at the default page, www.kidsmedicalcare.com, the text for the heading now attempts to center. On all the other links, the heading text left justifies against the logo. Dazed and confused!
Sorry, I’m not quite sure what you are asking (I’m probably being thick again)
Are you talking about the menu (Home, About Hours etc…) ? If so to center the menu you can add these rules.
#nav{float:none;width:auto;display:table;margin:0 auto 4px;}
1 Like
Sorry for being vague again. I’m actually referring to the heading with the name and address. On the main page it centers while the other pages left justify against the logo.
That’s because you have a different css file on that page applying different rules and one of which is to apply text-align:center to the body and thus the text gets centred.
You have a css file way down the page where it shouldn’t be.
</ul>
<div class="main">
<link href="/Content/KidsMedicalCare.css" rel="stylesheet"/>
<div id="divhoursofoperation">
<ul>
CSS files shouldn’t be in the body of a page but only in the head (although they still work in the body but that’s besides the point).
You don’t need multiple css files for a site as small as this and even if you did you would only want the differences in a different file. Just use the one css file for now and you can always split it later if needed for ease of management. Most people just work with the one css file on small projects.
1 Like
Thanks so much for all of the help. I was experimenting with Microsoft MVC concurrently and didn’t realize I was rendering the second css and didn’t think to look past the heading. Thanks again for all of the help and patience.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.