Move menu to top and adding responsive divs (Suburbia theme)
-
Hi, I have been trying to make my site a bit responsive (i.e. still many problems) and have a few queries, will be grateful for any response:
1. One of the issues is turning out to be the main menu on the left – this takes up most of the width at smaller scales.
I was wondering if there is a way to move this to the top for narrow widths: in the header area (through media queries? if that works in this pre-defined theme structure). If not, to remove it and use something else?
2. On the individual post pages, how can I add a different-width column, between the main content and the navigation buttons [see here], in a way that this new column/div would move below the main content when the screen-width is narrow. (I want to add the contents of each book to the right of the image-column, in a parallel narrower column – basically achieving a similar effect as the home- or essays-page.)
Many thanks in advance for any suggestions and help!
The blog I need help with is: (visible only to logged in users)
-
1. The basics would be: a) set #access to position relative, width 100% or less, and decrease its height, b) set #access li to display inline-block or float left, and add a right margin. Then you’ll need additional CSS to change the styling of the dropdown items and other details. And then you’ll enclose all of these rules in a max-width media query.
2. You create two divs in the post editor, give them custom class names (say, “singleimage” and “singletext”) and add the appropriate CSS for them (singleimage float left and width A%, singletext float right and width B%, where A+B = less than 100). Then you add alternative CSS for them (both divs float none and width 100%) and enclose this alternative CSS into a max-width media query.
PS I’m beginning to wonder why you selected Suburbia!
-
Thanks so much! I’ve now done the second part (1. menu will have to wait for later). The two divs are ‘main’ (left one) and ‘contents’ (right one) with the following code.
#single { margin-left: 196px; border-top: 0 solid #efefef; padding-top: 26px; width: 100%; max-width: 980px; min-width: 350px; } #main { padding-right: 0; margin-top: 12px; float: left; width: 55%; max-width: 550px; min-width: 350px; border-top: dotted 1px #FF0000; border-right: solid 0 #efefef; } #contents { padding-left: 0; margin-top: 12px; margin-left: 20px; float: right; width: 38%; max-width: 400px; min-width: 100px; border-top: dotted 1px #FF0000; border-left: solid 0 #efefef; }The left div seems to be scaling fine with the screen-reduction but the right one remains constant-width and isn’t shifting down. Not sure what I need to change/add here to make the whole page scale proportionally to a min-width, like the grid pages, before the columns shift down. Any help will be much appreciated.
Also, is there a way to add a dividing line as a div (between these two divs) that covers the entire height in each variable-height post? Border properties do not work as the divs have padding and border at the top that I’d like to keep as they are.
Many thanks again for all your help!
PS.
Reason for Suburbia: sheer ignorance! I’ve just learnt a few things (thanks to you!) but had no clue about customisation etc. so the only themes I found mainly with a grid format I was looking for were Suburbia and Columnist. -
First, your divs should have classes, not IDs.
Post editor:
<div class="whatever">
CSS editor:
.whatever {Second, better use unusual names instead of standard names like “single” or “main”, because on many themes these are names for already existing sections.
Third, I think you misunderstood my suggestion. You don’t set min and max widths for your divs: you set a width only, the width expressed as a percentage ensures that the divs will get narrower as the theme gets narrower, and after you’re satisfied with the result you create separate CSS that says turn the divs to full width when the theme shrinks below a certain pixel width.
As for the vertical divider, since the height of the “contents” div will probably vary (right?), you can’t create it as a separate floating section: you need to enclose the “contents” div in another div and add a left border to that div.
-
Great, thanks a lot, that clarifies much of it. What I’m not clear about though is the separate CSS to define div widths – are these the ‘media queries’ and how are they best defined? I tried some using examples from the forums but they seem to have no effect so far, will try once I’ve implemented the changed div classes etc.
Thanks a ton!
-
Okay, I’ve set the divs up but I still can’t get the right div to flow under the left one [or set the navigation right in places like this].
I was wondering if there is any missing or conflicting data in the following code which may be relevant for this problem: basically why isn’t the ‘contents’ (rightycolumn) scaling? I’ve moved it’s width-% into its containing div (dividingline), is that a problem?
#single { margin-left: 196px; border-top: 0 solid #efefef; padding-top: 26px; width: 100%; max-width: 980px; min-width: 350px; } #single p { font-size: 17px !important; line-height: 32px; word-wrap: break-word; color: #6a6a6a; } .list { color: #6a6a6a; margin-left: -20px; line-height: 26px; padding-top: 5px; } .rightycolumn { padding-left: 0; margin-top: 0; margin-left: 40px; float: right; border-top: dotted 1px #FF0000; border-bottom: dotted 1px #FF0000; border-left: solid 0 #efefef; } .leftycolumn { padding-right: 0; margin-right: 0; margin-top: 12px; float: left; width: 55%; border-top: dotted 1px #FF0000; border-right: solid 0 #efefef; } .dividingline { border-left: solid 1px #efefef; width: 40%; height: 100%; float: right; clear: right; padding-top: 0; margin-top: 12px; }Will be grateful for any inputs. Thanks!
-
My apologies: I gave a rushed reply at first, thinking of what should normally happen inside the post column but without considering the rest of the structure. Now that I checked things more carefully, I think that what you’re trying to do is impossible so long as the menu column and the meta column have a fixed width: if the width of the post column is a percentage of a changing total width, the widths of the menu column and the meta column must also be percentages, and so must be all the horizontal margins. I don’t think this would look good, so in my opinion you should forget responsive.
-
Thanks again for your reply! Yes I’m beginning to think it is getting a bit too complicated and I should’ve opted for an easier solution. Will see what works best and in any case I have the earlier CSS version to revert to.
A whole lot of thanks for your helpfulness all along!
-
Ah one last thing! My search-form seems to have disappeared. I didn’t change any settings for that but maybe due to other elements?
#wrapper { margin-bottom: -50px; margin-top: 5px; background-color: #f4f4f4; position: relative; width: 99%; } #search-3 { position: absolute; right: 20px; top: 20px; width: 100%; max-width: 195px; min-width: 155px; }Thanks for any pointers!
-
I think this was a footer widget, so my guess is you removed it in Appearance > Widgets.
-
- The topic ‘Move menu to top and adding responsive divs (Suburbia theme)’ is closed to new replies.
WordPress.com Forums 