Editing tablet and mobile views without changing the laptop view
-
Hi there,
I am fairly new to WordPress, so still adjusting to its design interface. I’m hoping to adjust the homepage slightly for tablet and mobile view. I need to make my header image shorter (without losing it), so that the website name appears on screen when the website loads, and to enlarge and change the position of the headshot. But the header image and photo are absolutely perfect in laptop view.
If you can help me, that would be amazing.
Thanks, and all the very best.
The blog I need help with is: (visible only to logged in users)
-
Hi there,
I’ve visited your site and it seems you may be using a different header image that what you were referring to in this post. Was it the case that you were using a header with an embedded graphic of some kind (like a logo) in it?
If so it is possible to adjust the sizing of headers on your site, but this requires the use of custom CSS code, which is not possible under your current plan, but can be had by moving up to our Explorer plan.
With that said, while I’m not able to see what your site was like at the time you posted this, I did want to share that I like your current header image and think the homepage is presented nicely as it is now. :)
Hope that helps. Please let us know if you have any more questions.
-
Thanks ever so much! :-) I haven’t changed it at any point, but did try uploading a slightly shorter version of the same photo as the b/g before switching back, which might be the issue.
May I also quickly ask if there is any way of linking my header to my homepage on my current plan, please? (I.e. when you’re on a different page, at the moment you can only click the ‘Homepage’ button at the bottom to get back to the homepage; it would be lovely to also use the header in the same way).
Thanks again, and all best.
-
Apologies! Should also have added that there are two embedded graphics in the header b/g image – the image is one pexels photo doubled, with one line and a panel of white added in Word, all of which I screenshot and saved as a png.
-
Hi again,
May I also quickly ask if there is any way of linking my header to my homepage on my current plan, please? (I.e. when you’re on a different page, at the moment you can only click the ‘Homepage’ button at the bottom to get back to the homepage; it would be lovely to also use the header in the same way).
It’s not possible to set a link for your header image. This is not a function of your upgrade, but the theme you are using. The Cover Block in your header (what is adding the image into the background) does not have the option to set a link URL. This may change but for now it’s not possible. One workaround you can employ is to make your heading into a link.
Also of course I recommend a “Home” link in your menu as well, which is a best practice.
Should also have added that there are two embedded graphics in the header b/g image – the image is one pexels photo doubled, with one line and a panel of white added in Word, all of which I screenshot and saved as a png.
Unfortunately the practice of embedding content into header images worked well when the only way we accessed the internet was via our computers, but with smartphones and tablets in play, websites now need to be adaptable. This means that the design of sites these days is such that they refactor themselves to fit on many different screen sizes. One side effect of this is that large images (that span the full width of the site) are often fluid in nature, and the image will be cropped differently depending on if the page is viewed on a phone or a tablet.
Because of that, it’s pretty much impossible to create header images that are a fixed width and do not crop on smaller screens. That is why on websites these days you often see the use of what I call “background-y” images that can stand up to being cropped or re-factored without affecting the design.
It is possible with CSS code to force the with of images in some cases, but that would require an upgrade to our WordPress.com Explorer Plan since it’s not possible to add CSS code under your current plan. If you’re at all interested in that route we’re happy to discuss. :)
Thanks!
-
- The topic ‘Editing tablet and mobile views without changing the laptop view’ is closed to new replies.