- This topic has 10 replies, 2 voices, and was last updated 8 years, 6 months ago by bdbrown.
-
AuthorPosts
-
September 2, 2015 at 9:08 am #133778David
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!!
September 2, 2015 at 9:40 am #133794bdbrownHi 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.
September 2, 2015 at 9:53 am #133803DavidThanks 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?
September 2, 2015 at 10:33 am #133835Davidhi
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
September 2, 2015 at 3:07 pm #133905bdbrownwould 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.
September 3, 2015 at 7:07 am #134064Davidi 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 🙂
September 3, 2015 at 11:51 am #134125bdbrownHi David. Your “i have seen this” link or image didn’t come through. Can you post it again? Thanks.
September 3, 2015 at 11:57 am #134126Davidtried this but put an image under the menu, at present it is header, nav, content
is there a CSS option?
September 4, 2015 at 12:24 pm #134412bdbrownSorry; 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?
September 4, 2015 at 1:00 pm #134418Davidhi, 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)
September 4, 2015 at 4:26 pm #134468bdbrownIf 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; } }
-
AuthorPosts
- You must be logged in to reply to this topic.