changing proportions of my theme (responsive)
-
Hello,
I would like to change the proportions allocated to the different components of my theme (which is responsive).
Knowing that there are three parts (left column, main central column, and right column (widget)) to which are added the left and right “margins”.It turns out that these margins are too wide.
I wish they take less space for the benefit of the main column of text, which I find too small.
I have explored the details of css, but I do not have the required level!..
If you could help me that would be great!The blog I need help with is: (visible only to logged in users)
-
Hi there, the overall width of the main container ( #page ) is set to a max-width of 960px. The left column has a fixed width of 240px. The #main section (which is the parent of content and right sidebar, has a width of 68.75%. The content column ( #primary ) has a width of 68.1818% and the right widget column ( #tertiary ) has a width of 22.7273%.
The following increase the overall max-width of the #page div from 960px to 1160px and increases the width of the #main section from 68.75 to 73.75%. See what you thing with this and we can go from there.
@media screen and (min-width: 1000px) { #page { max-width: 1160px; } #main { width: 73.75%; } }I’ve used a Media Query to limit this change to screens/windows 1000px and wider since below that things get complex. at 999px and narrower, the original design kicks back in.
-
Hi,
thank you very much for your help.
I entered this on the css “composer”, and it worked!
That’s very nice, i dreamed of this since long time ago!
(i let checked “Apply this to the mobile theme”, as that was already checked).
I don’t know if it is possible to adjust something:
this new setting is perfect when there is the 3 columns pattern.
But when it is only 2 (like reading an article or a page in “single view”, not in blog or home view), i’m finding it too broad!
I’m sorry for this new question! (and please excuse my english).
(If it’s not possible, well, not too serious. Maybe then i could define a new “compromise” proportion which would be ok for this two different cases)
Again, thank you very much. -
This can get a bit tricky. Add the following below all other CSS and see what you think.
@media screen and (min-width: 750px) and (max-width: 924px) { #page { max-width: 80%; } #main { width: 60%; } #subsidiary { width: 220px } } @media screen and (max-width: 699px) { #page { padding-left: 30px; padding-right: 30px } }I also added a bit of left and right padding with the last media query to give just a bit more whitespace on left and right when things go to a single column.
-
Hi!
thanks again. ;)
ok i did add this new code below the previous you gave to me.
but, unless i made something wrong (i tried several times!), when i display a post in his “own” url, it appears as wide as with only the first code you gave to me? -
I took a look at your Widgets and see you have the right sidebar widgets set to show only on the front page of your site, so on other pages and on single post pages, the above code applies, but due to the missing right sidebar it doesn’t have the exact same effect.
We can modify the above code to only apply to your home page if that is what you want, or we can create additional code to control static pages, such as your fictions-table page and single post pages.
Let me know your thoughts.
-
Yes, the right sidebar widget is present in the “about – index – links” page too; and could also appear in one or other i could create one day; but yes, you’re right.
Maybe it could be nice to have the code for “when there is the right sidebar” (home page, about, some possible others pages..), and the code for when there isn’t the right sidebar (pages, single post pages…)? If you think it is smart (and not too complicated!) ?
(i’d wish to know how to do that!;) -
Hmmm, the way you have things set up (using the default template and then excluding the widgets with Widget Visibility) presents a problem as we have no CSS class to target those pages, so we would end up having to target them by the unique post id.
My suggestion would be, on any page you do not want to have a sidebar that you set that page to use the “full-width” page template. That way we could target by using page-template-full-width and page-template-default from the opening body HTML tag.
-
I wanted to check about this “full-width” setting (which I clearly remembered), and i didn’t find it (although i thought remember i settled that way each time).
Then i realize that it appears only for pages, not for posts.
But I usually use posts.
(And the setting of the blog is adjusted to show the last posts (not a static page))
I tried to activate a page both with “full width”, then “default”, but that didn’t change nothing for the wide of this page. -
The following does pretty much the same thing to single blog posts.
@media screen and (min-width: 750px) { .single #main { max-width: 50%; float: left; margin-left: 40px; } } @media screen and (max-width: 699px) { .single #page { padding-left: 30px; padding-right: 30px; } }See what you think with this.
-
Hi
(sorry for the delay i was on work travel!).
Thank you again very much.
Thus i added this new code to the previous, did I do right??
(first i replace the previous one by this new but it seemed wrong?).I think it is good now: the home page is nice with the proportion of the three areas (center + left and right widgets areas).
And when i open a single post, the view is narrower than previously. -
(I just noticed, fortuitously, that when i click on a “category”, then the web page showing the posts related to a category still displays with the “broad way”)
-
-
Hi @supernovia,
i guess it is almost ok, but i would like to be sure i’m using the correct codes among all those that thesacredpath kindly provided me previously!
(i’m a little lost with that!;) -
@gabrie75f it depends on the result you want. I recommend trying out the different options in the customizer, then using the preview buttons to make sure your site looks good on different devices. You can also click links on the site to view different pages.
Once you get what you want, you can save the changes. Or, if you’re still having trouble, let us know which styles you’re using and what trouble you’re having with them.
-
Thanks @supernovia. I’ll soon check again all of these different suggested codes, because i’m not sure about which of them i have to add/append, or replace! thanks.
-
mmmh. no, something doesn’t completely work..: :)
I have these three different codes, now, in the css.
but the “single post” (or page) view is too wide.
my main column (when there are the two widgets areas, left and right) is ok.
but when the right widget area isn’t displayed (as in single post view), the text goes too far, occupying also the right widget area.
It’s too broad for a nice reading experience i think!
I think the main column should keep sort of same width that when there is the right widget area! thank you for help. -
@gabrie75f did you already solve this? The single post column is the same width as the main page column right now.
For what it’s worth, though, this theme is designed with readability in mind: since you have columns on either side of the content, the extra margin in between columns helps improve readability. The line lengths are well within the recommended 50-75 characters, too, even without the extra CSS.
-
Hi @supernovia,
no as i said i didn’t resolve this. it is quite like half resolved!
i have received several snippets of codes previously, kindly suggested by thesacredpath, but after all of the messages i don’t know which of them i should keep and which of them i should delete (or replace them by the new ones?). so i’m lost. the central column of my home page is nice, now (wider as the origin, that’s i wanted), but now, the single post or page view (when there isn’t the widget area at the right) is way to broad, not very readable (the lines are tooo long, because they run along this widget area!!) ;) I precise: they are too broad when i’m on a large desktop screen (on my laptop, as i see now, that’s almost ok,
but,
shortly: that would be great that the left widget area and the main central column stays similar when we click on a post and jump from the home page to this post… :) (maybe i ask too much!!) -
Okay, the other day when I looked, you had it, but things have changed since then.
How about this as a solution instead?
1) Take out the CSS for single pages
2) Add a text widget to the Secondary sidebar. Leave it blank. Change the visibility to “Hide” if “Page” is “Front Page” . Or, put an about author or some other desired widget on non-front pages.
That way your page widths will be consistent automatically.
- The topic ‘changing proportions of my theme (responsive)’ is closed to new replies.
WordPress.com Forums 