Forum Replies Created
-
Posts
-
Hi,
Take this as the starting point on a normal PC screen: http://imgur.com/OjX1W1b (the contact info is not quite right-aligned under/with the Facebook icon in this image, but that’s where I want it).
As the screen size reduces I would use a sequence of @media screen and (max-width: 989px) statements at various max-widths to progressively reduce the font-size of h4 (Jack’s Gallery), h5 (Jack Vettirano…) and .hdr-contact-txt (contact info) so that both text boxes stayed at the same line/level in the header for as long as possible.
I’ve added a padding-top:50px to hdr-titles of Elliott’s CSS (and as #484650, the transform would be removed although I’ve left it live for now). At some screen size I would then reduce this padding-top to shift that box up and bring hdr-contact underneath it e.g. http://imgur.com/8KuzsbK. The hdr-contact CSS for this would be
float: none;
left: 50%;
text-align: center;
top: 100px;I usually design down to a 320px screen so I’d continue to reduce font size as needed with both boxes ‘stacked’ as per the second image, perhaps having to switch one off at some point. So when the boxes are stacked, I think I’ve got CSS for that.
What I need help with please is:
1. CSS for hdr-contact to get it right aligned under the Facebook icon on normal screens, and to keep it in that position as screen sizes reduce to about 1200px, which is where I think I’ll have to do the first font size reduction.
2. Keep hdr-contact in that right-aligned position until I do the ‘stacking’ (my guess is there’s no change from #1)
Hope that’s clear… :-)
Hi Elliott,
That didn’t work. See the result here:
However, for hdr-titles, if I switch off the transform element in Chrome developer tools it seems to work – do you agree?
But I can’t get hdr-contact to work. Just to clarify I’d like it positioned similar to this: which is about right:400px but a fixed value doesn’t work for different screen sizes. Can you suggest something else?
Zimbo
Thanks… and interesting. I’m new to Enfold: in other themes I’ve used there has been a limited number of PHP theme files that could be put in a child folder.
Is there a list somewhere of which Enfold PHP files can be put in a child theme folder?
OK, thanks. Screenshot: http://imgur.com/OjX1W1b
Website: dev.jacksgallery.co.uk (NOT www)As you can see I’ve managed to add the contact info into the header widget and it’s nearly OK on a 24″ screen (but not quite right) plus it all screws up as soon as the screen size reduces – so I could do with some help please for some CSS that:
– always keeps the Jack’s Gallery text centered
– keeps the contact info always to the rightIf you can get me ‘on the track’ I can then work out some media queries as screen size reduces to reduce font sizes and maybe turn off the blocks at some point (assuming the blocks won’t be able to ‘stack’ under the logo).
Max container width is 1360px.
Code inside the header is:<div class="hdr-titles"> <h4>Jack's Gallery</h4> <h5>Jack Vettriano Artist's Proofs and Limited Edition Prints</h5> </div> <div class="hdr-contact"> <p class="hdr-contact-txt">Gallery: 01491 571387</p> <p class="hdr-contact-txt">Mobile: 07775 735136</p> <p class="hdr-contact-txt">Email: <a href="mailto: (Email address hidden if logged out) "> (Email address hidden if logged out) </a></p> </div>Child theme CSS is:`
/* header widget */
#header .widget {
left: 60%;
top: 50px;
position: absolute;
transform: translate(-53%);
z-index: 999;
width: 50%;}.hdr-titles {
float: left;
position: relative;
text-align: center;
padding-top: 6px;}.hdr-contact {
float: right;
position: relative;
text-align: right;}.hdr-contact-txt {
font-size: 16px;
margin: 0.25em 0;}`Hi Elliott,
You know what, I’d just thought about doing it that way an hour so ago!
I’m new to Enfold – how do I upload a screenshot? I can’t see an upload link anywhere.
Hi,
What I wanted to do is turn off the default H1 page title on the home page, and maybe others e.g. <h1 class=”.main-title .entry-title”>
However… this is my first time using Enfold and I’m still finding my way around the setup – but I have now found how to turn on/off the page title, so I’m OK.
I’ve searched for some documentation but can’t find much – is there a doc that lists out all the theme’s functions/options/features? For instance, I can’t work out how to use the Custom Fields on Edit Page.
