[Resolved] Resizing issues

[Jennifer]

So, my resizing issues are related to the CSS I used to specify certain elements be a specific size for my blog and blog posts (.post and .single <thanks, Leo!>, being the modifiers I used). I was wondering if there was a way to insert additional CSS to tell it to ignore the specific sizing for mobile and auto-adjust accordingly? I played around with a bunch of different variations for hours and hours a few days ago, but was (obviously) unsuccessful.

Thanks for all the help!

Jen

GP Premium 1.2.94

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jennifer]

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?

[Jennifer]

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

[Leo]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jennifer]

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

[Tom]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jennifer]

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.

[Tom]

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

Can you show me what you have so far?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Jennifer]

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

[Jennifer]

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

[Jennifer]

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;
}
}

[Jennifer]

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.

[Leo]

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)

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jennifer]

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

[Author]

Posts