At certain viewport width, there is no margin or padding to the left and right sides

haheute commented

2024-03-25 15:27:38 +01:00

Contributor

I mostly have my browser viewport open at something like between 1250px and 1280px width.

Then, the content of https://friendi.ca does not have some space to the right and left edges of the browser window...

See the attached screenshot.. maybe that can be improved..

I mostly have my browser viewport open at something like between 1250px and 1280px width. Then, the content of https://friendi.ca does not have some space to the right and left edges of the browser window... See the attached screenshot.. maybe that can be improved..

friendi.ca-width.jpg

60 KiB

MrPetovan commented

2024-03-25 15:29:30 +01:00

Owner

This screenshot is 629px wide, where do you see the size of your viewport?

haheute commented

2024-03-25 15:32:50 +01:00

Author

Contributor

This screenshot is only a part of the browser window to show the left edge or border of the browser. I have looked up the width in the firefox developer tools. I have looked at the html element width. You can try it by dragging the browser window wider or narrower.. at some points is no space left and right.

haheute commented

2024-03-25 15:38:52 +01:00

Author

Contributor

I guess I wrote not the exact correct width. I think it begins at 1280px width.. not at 1250px.. my fault..
But you can see what I mean when you resize the browser window.

I guess I wrote not the exact correct width. I think it begins at 1280px width.. not at 1250px.. my fault.. But you can see what I mean when you resize the browser window.

MrPetovan commented

2024-03-25 15:41:52 +01:00

Owner

Ah, I get it now, you're talking about the inside padding from the browser window that disappears when the viewport width is between 1281px and 1415px. I thought you meant the text overflows the viewport. Thanks for the report!

👍 1

haheute commented

2024-03-25 15:51:43 +01:00

Author

Contributor

Yes, I believe it is this CSS rule:

@media screen and (max-width: 1280px) {
  .inner {
    max-width: 90%;
  }
}

But I'm not sure what to do about it.. Or how to change it.. maybe with "min-width", but I found it is a Wordpress theme, or based on a Wordpress theme.. so.. looks not so easy to change all the media queries in the theme .. Or maybe the theme could rather be updated.. I don't know.

And I don't know how to work on it and test it. I have a friendica instance where I could try to fix little things, but I don't have a 'copy' of this site to work with..

or maybe it is a much easier little fix.. someone else must look on it

Yes, I believe it is this CSS rule: ``` @media screen and (max-width: 1280px) { .inner { max-width: 90%; } } ``` But I'm not sure what to do about it.. Or how to change it.. maybe with "min-width", but I found it is a Wordpress theme, or based on a Wordpress theme.. so.. looks not so easy to change all the media queries in the theme .. Or maybe the theme could rather be updated.. I don't know. And I don't know how to work on it and test it. I have a friendica instance where I could try to fix little things, but I don't have a 'copy' of this site to work with.. or maybe it is a much easier little fix.. someone else must look on it

MrPetovan commented

2024-03-25 15:54:56 +01:00

Owner

You can work on the CSS files in your browser. In the Developer panel, "Sources" tab, you can make changes to the files in your client.

👍 1 👀 1

haheute referenced this issue

2024-03-25 17:36:19 +01:00

Always have some margin left and right of the page content. #11

At certain viewport width, there is no margin or padding to the left and right sides #10