Need help? Check out our Support site, then

Homepage changes

  1. I'm currently having a few problems with my homepage and I can't seem to be able to customise it how I would like to. So perhaps you could help me out?

    Here are the main things I would like to change:

    -The text that says "New Showreel 2016!" Seems to have some sort of shadow over the text, is there any way of getting rid of this?

    -Is there anyway I can make the video preview/banner bigger and transparent?

    -Finally the text at the bottom of the page, thats in all in white - can I change that to a different colour so you can see it more clearly?

    Overall I I just feel this page is a bit messy and needs cleaning up! Hope you can help. Many thanks,


    The blog I need help with is

  2. Hi Will,

    Here's some CSS to try, each line attempts to fix the things you want to change in order:

    .pique-panel-content h1 {
    	text-shadow: none;
    .pique-panel-content .entry-content {
    .pique-panel-content {
    	color: #f00;

    The middle one just sets the panel width - to see if you can get the video or expand you'll need to go to the CSS section of the customiser and try different values in the Media Width box. I'm not sure this will work but it's worth trying. I'm not sure what you meant by making the video transparent.

  3. No worries Thank you for your help. I managed to sort in the end - matter of trial and error with code.

    Thanks again.

  4. It looks good with the blue. I only have one final suggestion and that's to add something like:

    #story {
      padding: 10px;

    so that the text isn't right up to the edges of the translucent blue box.

  5. That so much better thank you. Is there any chance you can help me out with my mobile version?

    The problems I'm mainly having are:
    - The first title is "Whats your story" on mobile it reads "Story?"
    -The actual logo seems to be very squashed and distorted on mobile
    -The navigation on the mobile is extremely short! (I know thats probably because of text size vs screen size.) Can you suggest a cleaner design alternative for this? If not don't worry the main two concerns are the logo and title on the homepage.

    *If you look at my website on a computer then look at on a mobile device you will instantly see the problems and difference I'm talking about.

    Hope this all makes sense, and you can help! Thanks a lot,

  6. Hi Will, this issue is caused by some custom CSS that you have, but removing it doesn't entirely fix the issue, so add the following media query to your custom CSS below all of the other CSS you have.

    @media screen and (max-width: 767px) {
    	#pique-hero .pique-panel-content .entry-content {
    		padding-top: 4em;
  7. Thank you for your reply.

    Unfortunately the issue was there before I had even started on my custom CSS. However I have just given that code a try - still not luck!

  8. Any other ideas?

  9. That code showed the full title on mobiles for me, you don't seem to have it in your CSS at the moment. Could you try adding it back in again so we can check to see if there are any other conflicts?

  10. Just added it back in - the text is sorted thank you. Its just the logo that still seems squashed / distorted

  11. Hi, glad the title issue is resolved. For the logo, add the following at the bottom of your custom CSS and see what you think.

    .site-branding .site-logo-link img {
    	max-height: 100px;
    	height: 100%;
    	padding-left: 10px;
    	padding-right: 10px;
  12. Thank you for getting back to me on this.

    However unfortunately it made it worse! Have you any other suggestions?

  13. That code looks good to me, did you copy it exactly as is? When I check it looks the same on tablets and larger screens and on mobiles it stops the logo being stretched vertically, if that's not what's happening for you can you post a screenshot?

  14. I copied it exactly as it is and it stretches the logo horizontelly on the desktop. Whereas on the mobile version nothing changes.

  15. Please visit the link for the screen shot:

    Image number 1 is, without the code
    Image number 2 is with the code
    Image number 3 is what the mobile version looks with or without the code

  16. That is strange. What browser and which version number are you using and what operating system are you on? (i.e. I'm on FireFox 47.0.1 Mac OSX 10.11.6)

    Have you tried clicking Save and Publish and seeing if it looks any different live as opposed to in the customiser?

  17. I'm on a Safari Mac OSX 10.11.6 - I've tried all browsers, Google chrome, Safari and firefox.

    To be honest its the mobile device version that I'm worried about...

  18. And yes I've done the save and published and tested it live

  19. I don't see the CSS currently loaded with your theme, did you remove it again? It would help if you left it in just for a bit so I can take another look.

  20. Sorry, I'll put back in now

  21. I see the issue in Safari, the logo is warped on pretty much every screen.

    It still looks fine when I test at multiple sizes in FireFox on my desktop and the FireFox mobile app on my phone - perhaps this is a browser cache issue. Try refreshing/deleting your browser cache/close and reopening FireFox and see if it's fixed then.

    I have no idea what the Safari issue is I'm afraid, it looks to be something to do with how the height is set on the image but I'm not sure how to address it, sorry.

  22. Okay thanks again for looking into this.

    Unfortunately I cleared my browser history and cache and it still looks stretched on my mobile.

    Bit disapointed with word press on this one. I can't always expect my clients to look at my website on a particular browser or in a certain way. I expected it to function correctly as it does on a computer.

    It sounds like you have looked at all the options and spent some time on it so thank you for that.

    I will just have to keep playing around.

  23. What mobile OS and browser versions are you using? I'll tag this for a member of staff to take a look as it seems the site logo gets squished even with your custom CSS turned off and there might be something they can "fix" in the theme files to stop this from happening. I suspect it's not exactly a bug, just a design decision that works for some but not for you.

    The sheer number of combinations of browsers, versions and operating systems that all behave ever-so-slightly different makes web design a bit of a minefield. Add custom CSS into this and it gets really tricky. Hopefully there'll be a solution that works for you though.

  24. hi i am having trouble with my homepage. i need to remove the white box right in the middle of my image. can you help me ? My blog name is

  25. Could you please start a new forum thread as your questions isn't really related to this one and if we keep chatting here the other respondents will get notifications about our posts that they aren't interested in.

    I'll happily help you out once you start your own thread, although I don't see a white box in the middle of the image on your homepage. Are you talking about a different site?

  26. My mobile is iPhone IOS 9.3.4, I've tried all the browsers - Google chrome, Firefox and Safari.

    It would be great if you could tag another member of staff for me. Let me know please


  27. Oops, I thought I already had done. It's tagged now so sit tight and a member of staff will get around to checking in due course.

  28. No worries.

    Thank you

  29. @wbmedia94, let's make a slight adjustment to the code I gave you. This works on my iPhone 5s 9.34.

    .site-branding .site-logo-link img {
        max-height: 75px;
        height: 100%;
        width: auto;
        padding-left: 10px;
        padding-right: 10px;
  30. Unfortunately when I do that, it squashes my logo on my computer version!

Topic Closed

This topic has been closed to new replies.

About this Topic