Effect of browser window size on blog layout
Hello again! 😅
As a previous question of mine showed, I’ve been struggling with the fact that, depending on which browser/device is used or how large the browser window is, my blog’s layout (=sidebar and photo/text alignment) changes – and not always for the better.
Only now did it occur to me look at other blogs which use Duet, among others Elisa Ruland’s who earlier posted a comment in this forum.
The only thing I did was to play around with the browser which I mainly use (Safari). From previous answers I had learned that there’s a cut-off or trigger point, which causes a layout change so I kept changing the size of the browser window, and the same thing happened with every single Duet blog I looked at:
If I reduced the size of the window (by not more than perhaps an inch) the sidebar disappeared and suddenly the text was much wider (taking up space from where the sidebar had been) whereas a lot of the images remained the same size or became smaller, now looking like they’d been aligned to the left (caused by the text becoming wider.)
Which really does Duet no justice at all!
I’m sure that a responsive theme must have that cut-off point for all sorts of technical reasons which I don’t understand, but what I do understand is that it would be a very good idea if it didn’t allow text to “creep” across the thin dotted line into sidebar territory (while leaving images the same size or making them smaller.)
In short, would you be able to make sure that the margin (that beautiful thin dotted line) always stays even so that post and sidebar areas never mix?
The blog I need help with is nojatuolihaahuilija.wordpress.com.
We definitely don’t want text to run into the sidebar. I looked at your site and I do not see this problem. Is there a specific page that is causing this issue?
I’m glad to hear you don’t see any problems! Hopefully most of my readers don’t see them either!
This is not about any specific post, the problem occurs throughout my blog (and those other Duet blogs I looked at) as soon as I reduce the size of the browser window a little bit:
POOF! The layout changes. The left side stays the same (=straight), but on the right the thin dotted line moves very close to the frame and text is spread out that way (as the widgets move to the footer).
Fine, the sidebar widgets moving to the footer is not such a big deal, but why do the text parts have to become so much wider? The black background of slideshows also widens to the right to match the width of the text, but the images don’t.
What I’m after here is why does that happen? Why can’t the text and image margins stay straight? (And like I said, I only have to reduce the size of the browser window a little bit from its maximum size for all this to occur.)
In modern web design, many developers (including us at The Theme Foundry) use a technique called responsive design to allow your website to adapt to different screen sizes. Since screens come in all shapes and sized these days, we do our best to adapt to the different sizes.
In Duet, we set the size of the content area and the size of the sidebar to different percentage widths. For instance, the content is roughly 80% and the sidebar is 20%. As the browser resizes, the width is adjusted so these percentages are maintained. Once it gets to a small enough width, more drastic measures are taken, like moving the sidebar to the footer. The 80/20 split cannot be maintained once the browser width is so narrow, so it needs to move the sidebar somewhere else.
I hope this helps make sense of the issue.
Thank you for your reply! (especially because it doesn’t contain the words “we can’t see any problems with your site”..)
I do understand the whole 80/20 issue and that the website has to adapt to different screen sizes. It’s obvious that the sidebar has to go if width is reduced.
However, I didn’t reduce the width of the window, only the length (by a little bit), yet the sidebar still disappeared. With the width staying exactly the same and the text area spreading out the text becomes too wide – which is not reader-friendly. (Not to mention the issues related to the text/image ratio.)
I don’t have any more questions about this (Hallelujah!), I now have a better understanding of what to do to minimize potential problems relating to the layout of my blog.
I would just like to make one suggestion: I understand that when the sidebar is moved to the footer the content area takes over the whole space. However, would it be possible to set a limit to how wide the text can become? (important in terms of reader-friendliness and the balance between text and images)
Thanks again for your feedback. A vertical media query is set in Duet, but this should only be shown when your browser or device height is very small.
Adjusting the width of your text isn’t possible without making extensive CSS changes, unfortunately.
The topic ‘Effect of browser window size on blog layout’ is closed to new replies.