Resizing issues

Hi Jen,

Not really sure what the question is but I think you are looking to add some device specific CSS?
If so this should help: https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

When you specify an element to a specific size, are you using width or max-width? only max-width would be responsive.

Hi Leo,

I am just using width, but when I change it to max-width and follow the instructions from that post it overrides my specific sizing. No other options, huh?

This worked for me:

.single .inside-article,
.comments-area
{
width: 800px;
margin-left: -250px;
}

@media only screen and (max-width: 480px) {
.single .inside-article,
.comments-area
{
width: auto;
padding top: 5px;
padding-left: 10px;
padding-right: 10px;
margin-left: 5px;
margin-right: 5px;
}
}

.inside-right-sidebar
{
padding-left: 150px;
width: 350px;
}

@media only screen and (max-width: 480px) {
.inside-right-sidebar,
.site-footer
{
width: auto;
padding top: 5px;
padding-left: 5px;
padding-right: 5px;
margin-left: 0px;
margin-right: 0px;
}
}

Maybe it will help another poor dunce like me, haha! Thanks, you led me in the right direction! Now I have one more sizing issue, but not to do with REsizing:

I would like my page header image to span the page (full-width) in my blog, but I can't seem to achieve that. Help would be appreciated!

Best,

Jen

Not sure if you are referring to the blog page header or post page header but this should help: https://docs.generatepress.com/article/page-header-content/#container-type

They both have the same options. Just the blog page header is in the Customizer.

Let me know if this helps.

Hey Leo,

I'm referring to the blog page header. That doesn't help; making my image full screen makes it far too large and cuts off a significant portion of both ends. Maybe what I want isn't possible?

Best,

Jen

Do you have an example of what you're needing to achieve?

http://www.andersnoren.se/teman/lovecraft-wordpress-theme/

Something like the above. I don't want my content box to overlap, even though it looks pretty nice in the example.

You can achieve that in the Blog Page Header (if you're on the blog).

Can you show me what you have so far?

Tom,

Using the blog page header section in the customizer KIND of works. If I add a "." as dummy content and add 135px top and bottom padding, then I get this:

https://s2.postimg.org/rpzferdk9/blog_v2.png

The problem with that, is that it doesn't resize properly for mobile.

If I just upload it to the blog page header section in the customizer without doing anything else, I get this:

https://s24.postimg.org/id49fpdad/blog_v1.png

Which looks great on mobile, but I'm not digging so much on the desktop view.

Thanks,

Jen

This is how the header I like the look of in the desktop version looks when resized in mobile, by the way:

https://s16.postimg.org/9ocufa0hx/mobile_v2.png

And this is how the header I don't like the look of in the desktop version looks when resized in mobile:

https://s10.postimg.org/hbwpynmgp/mobile_v1.png

I found a solution, that will allow vertical mobile display to resize with the dummy content version properly. My question is, how can I see what it will do in a mobile display that is being used horizontally?

This is the CSS I created to get the mobile to resize how I wanted:

@media only screen and (max-width: 480px) {
.blog .page-header,
.blog .page-header-content
{
width: auto;
height: 65px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
}
}

For anyone facing a similar issue, I realized I hadn't addressed tablet view, so I added CSS for tablet and modified the height dictate in the mobile CSS with the !important afterward. In my particular example:

@media only screen and (max-width: 480px) {
.blog .page-header,
.blog .page-header-content
{
width: auto;
height: 65px !important;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
}
}

@media screen and (max-width: 768px) {
.blog .page-header,
.blog .page-header-content
{
width: auto;
height: 165px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
padding-right: 0px;
margin-left: 0px;
margin-right: 0px;
}
}

I'm positive there must be more elegant solutions, but this works.

Glad you found a solution and thanks for sharing :)

Looks like you are pretty interested in CSS so thought I'd mention that you can shorten the padding/margin by doing something like this:
padding: 5px 0px 5px 0px; (top, right, bottom, left).
or even better:
padding: 5px 0px; (top/bottom, left/right)

Hey Leo,

Thanks! I'll have to rewrite what I have to shorten and clean everything up! That's definitely handy.

I really appreciate all your guys' help!

Jen