Homepage changes

wbmedia94 · Member · Aug 1, 2016 at 1:53 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
hallluke · Member · Aug 1, 2016 at 3:50 pm
Copy link
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.
wbmedia94 · Member · Aug 1, 2016 at 5:31 pm
Copy link
No worries Thank you for your help. I managed to sort in the end – matter of trial and error with code.

Thanks again.
hallluke · Member · Aug 2, 2016 at 7:00 am
Copy link
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.
wbmedia94 · Member · Aug 2, 2016 at 10:02 am
Copy link
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.
thesacredpath · Member · Aug 3, 2016 at 12:56 am
Copy link
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;
	}
}
```
wbmedia94 · Member · Aug 3, 2016 at 6:45 am
Copy link
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!
wbmedia94 · Member · Aug 3, 2016 at 6:46 am
Copy link
Any other ideas?
hallluke · Member · Aug 3, 2016 at 7:26 am
Copy link
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?
wbmedia94 · Member · Aug 3, 2016 at 9:06 am
Copy link
Just added it back in – the text is sorted thank you. Its just the logo that still seems squashed / distorted
thesacredpath · Member · Aug 3, 2016 at 7:44 pm
Copy link
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;
}
```
wbmedia94 · Member · Aug 4, 2016 at 5:17 pm
Copy link
Thank you for getting back to me on this.

However unfortunately it made it worse! Have you any other suggestions?
hallluke · Member · Aug 4, 2016 at 5:24 pm
Copy link
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?
wbmedia94 · Member · Aug 5, 2016 at 7:11 am
Copy link
I copied it exactly as it is and it stretches the logo horizontelly on the desktop. Whereas on the mobile version nothing changes.
wbmedia94 · Member · Aug 5, 2016 at 7:15 am
Copy link
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
hallluke · Member · Aug 5, 2016 at 8:55 am
Copy link
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?
wbmedia94 · Member · Aug 5, 2016 at 9:55 am
Copy link
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…
wbmedia94 · Member · Aug 5, 2016 at 9:55 am
Copy link
And yes I’ve done the save and published and tested it live
hallluke · Member · Aug 5, 2016 at 10:16 am
Copy link
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.
wbmedia94 · Member · Aug 5, 2016 at 10:31 am
Copy link
Sorry, I’ll put back in now

No items found.