[Support request] Images in the header

Home Forums Support [Support request] Images in the header

Home Forums Support Images in the header

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #632814
    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

    GP Premium 1.6.2
    #632841
    Leo
    Staff
    Customer Support

    Hi there,

    Try this CSS:

    .header-widget {
        float: left;
    }

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

    #632998
    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?

    #633068
    David
    Staff
    Customer Support

    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.

    #633149
    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

    #633181
    David
    Staff
    Customer Support

    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.

    #633363
    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

    #633399
    David
    Staff
    Customer Support

    You’re welcome glad to be of help

    #633624
    David

    David,

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

    Thanks,

    Dave B

    #633679
    Leo
    Staff
    Customer Support

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

    Things like this would likely be in our documentation page πŸ™‚

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.