[Resolved] header space, using widgets

Home Forums Support header space, using widgets

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #133778
    David

    Hi
    I’m having a little issue!

    I’m trying to find a suitable place on the website for the business logo, telephone number etc

    The site in reference http://opclinic.users40.interdns.co.uk/

    I have tried the bottom using one widget (twice) and that is ok but those widgets dont allow for a logo!
    Is there are way i can get a logo in there, maybe a widget for that? (ive searched but not found one)

    I also then thought about no footer and using a section on each page but then not sure how to align etc (mobile site needs to look good also!)

    Last attempt was using an header image (logo) and a widget, but on the mobile it was widget and then logo and i wanted it the other way!! — so i then thought i’d design a image slider but the header appears to be split into to halves?? can this be changed??

    hope you can make sense of that!!

    #133794
    bdbrown

    Hi David. You can add an image using a Text widget and an img tag:

    <img src="path-to-your-image.jpg" alt="my image" height="50" width="80">
    

    Or, here are a couple of plugins you could try:
    https://wordpress.org/plugins/image-widget/
    https://wordpress.org/plugins/simple-image-widget/

    Here’s a guide that discusses both methods.

    #133803
    David

    Thanks i’ll have a look into this – i’m struggling to get the mobile element looking like it belongs to the desktop site, but that’s the problem everyone had lol

    Whilst you were replying i had a look at doing a single wide header image. i cant get this to display the full width of the navigation, only the same as the body, fix for that?

    #133835
    David

    hi

    ive added the simple image widget and that is good, so now i have 3x widgets in the footer..

    Questions;
    would i be any better off have only 1 widget area and then having those 3x widgets contained in it?
    although this looks good on a desktop site, the mobile site has the 3x widgets stacked up (long list), is there a way to force one line (shrink the size/text OR to disable the footer on a mobile OR to display different footer content on a mobile?

    thanks

    #133905
    bdbrown

    would i be any better off have only 1 widget area and then having those 3x widgets contained in it?

    The default will be to stack them so you’d have to use css to line them up and space them out.

    With three widget areas you could try adjusting the widgets as the viewport collapses with media queries like this:

    /* shrink widget width */
    @media (max-width: 1025px) {
      #footer-widgets .tablet-grid-50  {
       width: auto;
      }
    }
    
    /* expand and stack widgets */
    @media (max-width: 819px) {
      #footer-widgets .tablet-grid-50  {
       width: 100%;
      }
      #footer-widgets .tablet-grid-50 .widget {
        text-align: center;
      }
    }
    

    That’s not perfect because the third widget is somehow different and left-justified.
    Or you could just hide the footer widgets before they stack with this:

    /* hide footer widgets */
    @media (max-width: 1025px) {
      #footer-widgets {
        display: none;
      }
    }
    

    To display different widgets on mobile you could add them to the footer widget, use ccs to set them to display:none, then use a media query to display them and hide the others.

    #134064
    David

    i have opted to omit the widgets from the footer on anything less than 1025px as this is where the footer goes a little messy. other than omitting either of the widgets down to two. – at the moment i’m happy.

    I would like to have different header images for mobile devices, i have seen this;

    and wasn’t sure if this was what i needed or if a better way to do it? as this looks like i’d need it on each page? rather than a global setting like the CSS widgets?

    Thanks for all your help so far.. i do really like GP 🙂

    #134125
    bdbrown

    Hi David. Your “i have seen this” link or image didn’t come through. Can you post it again? Thanks.

    #134126
    David

    tried this but put an image under the menu, at present it is header, nav, content

    is there a CSS option?

    #134412
    bdbrown

    Sorry; still only seeing a placeholder. Is that an image you’re posting, or some code? Are we still talking about replacing the header site logo on mobile devices?

    #134418
    David

    hi, i’ll give up trying to paste it!! was code.

    best for you just to give me some options to have a different header image based on device/size of the screen like i have with the footer (widgets)

    #134468
    bdbrown

    If you set your main header image using Customizer > Site Identity > Logo, you could use this css to change the image on mobile devices:

    @media screen and (max-width: 768px){
      .site-logo a[rel="home"]:before {
        content:url('http://path-to-your-mobile-image.jpg');
      }
      .site-logo img {
        display: none;
      }
    }
    
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.