Homepage changes

  • Author
    Posts
  • #2703824

    wbmedia94
    Member

    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,

    Will.

    The blog I need help with is wbmedia.co.uk.

    #2703930

    hallluke
    Member

    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 {
    	max-width:100%;
    }
    .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.

    #2703974

    wbmedia94
    Member

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

    Thanks again.

    #2704017

    hallluke
    Member

    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.

    #2704019

    wbmedia94
    Member

    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,
    Will.

    #2704027

    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;
    	}
    }

    #2704028

    wbmedia94
    Member

    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!

    #2704029

    wbmedia94
    Member

    Any other ideas?

    #2704031

    hallluke
    Member

    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?

    #2704032

    wbmedia94
    Member

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

    #2704034

    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;
    }

    #2704035

    wbmedia94
    Member

    Thank you for getting back to me on this.

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

    #2704036

    hallluke
    Member

    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?

    #2704037

    wbmedia94
    Member

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

    #2704038

    wbmedia94
    Member

    Please visit the link for the screen shot:

    https://www.dropbox.com/sh/weox8u2ig5yn4om/AABuFKeR62HtAx0Fzf63V_cTa?dl=0

    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

    #2704039

    hallluke
    Member

    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?

    #2704040

    wbmedia94
    Member

    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…

    #2704041

    wbmedia94
    Member

    And yes I’ve done the save and published and tested it live

    #2704042

    hallluke
    Member

    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.

    #2704043

    wbmedia94
    Member

    Sorry, I’ll put back in now

The topic ‘Homepage changes’ is closed to new replies.