[Support request] Images in the header

[David]

folks,

I have a small image widget (actually it is the American Legion Logo) in the Header section of my site. It is currently displaying on the right. I want it to display on the left instead. How do I force it to display on the left before my site identity?

I’m currently working in a “sandbox” until my site is ready to go. Then I’ll moving my live site over to my new hosting service and porting the new WP site over.

Dave

[Leo]

Hi there,

Try this CSS:

.header-widget {
    float: left;
}

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

[David]

Thanks Leo, that worked great. I put that change into “Simple CSS”. However, down the road, if I use a child theme, would it be better to put that CSS in there? I specifically didn’t modify the site.css for the parent because I don’t want my changes to disappear when you folks update the theme, or is it possible in your system to put the code in the “Additional CSS” section of your “Customizing” tab?

[David]

Hi there,

All three options; child theme style sheet, Simple CSS and Additional CSS will all work 🙂 Would recommend the child theme if you have it installed and are looking to make a lot of customisations, if not the Simple or Additional is the easiest way to go.

[David]

Thanks David. I’m also having a problem with weird behavior of my images not aligning where they are supposed to. For example, if I use the WP image editor to align to the left so that the text will flow to the right, it works fine on a PC. But on a tablet or cell phone the image does pretty much what it wants to. If I use custom css to create a “raised” effect, then the picture behaves as it should.

For example, my html code is changed to something like this: <img class=” wp-image-117 alignleft raised” src=” …..
The result is that the image will alignleft and adopt the “raised” properties per my css. But if I leave off the “raised” css instruction and just stay with what is inserted by WP, the picture is not positioned as it should be on my iPhone or iPad.

My css for raised is:
.raised {
border: thin solid #000000;
box-shadow: 6px 6px 6px #BFBFBF;
float: left;
margin-top: 4px;
margin-right: 12px;
margin-bottom: 5px;
margin-left: 0px;
border-radius: 6px;
}

I’ve changed the html for my service officer (VA Claims Assistance) to the default code inserted by WP so that you can see the effect.

Thanks once again for excellent support.

Dave

[David]

OK, so the mobile CSS kicks in which removes the float and the inline properties.
One way round it would be to overcome the mobile CSS with your own media query rule like so it has the same properties as desktop:

@media (max-width: 768px) {
    .alignleft {
        display: inline;
        float: left;
        margin-right: 1.5em;
    }
}

With this in place you shouldn’t need the float: left; property in your .raised CSS.

[David]

Hey David,

That was just what the doctor ordered. It worked like a charm. Thanks so much for your excellent support. You guys are the best. I have lots of other questions but I’ll work through them as I continue to experiment.

Dave B

[David]

You’re welcome glad to be of help

[David]

David,

So, does Generate Press have a Child theme? If so, how/where do I get it?

Thanks,

Dave B

[Leo]

Here: https://docs.generatepress.com/article/using-child-theme/

Things like this would likely be in our documentation page 🙂

[Author]

Posts