Forum Replies Created
-
AuthorPosts
-
Hello Victoria,
Thank you for your help, it is much needed and appreciated!
What works: When the webpage is at larger desktop resolution and smaller mobile resolution, the logo size and padding looks great.
What doesn’t work:
1. At the medium in-between resolutions for tablets and larger devices, the logo becomes big with not enough padding.
2. The logo also jumps to the left with all the menu items appearing on the right changing its intended behaviour.
3. The logo appears not to be in the center of the page and the padding is larger on the left of the logo, creating more space between the logo and the first three menu items when centralised.Here is the screenshot showing examples of what I mean https://i.postimg.cc/D0cTk1DY/Logo-Resize-Padding.png
I appreciate any assistance in making the logo scale down gracefully keeping its size and padding proportions, and fixing the logo centralisation and padding issue.
Here is the code I got from another forum post to centralise the logo. The code also includes yours.
Thank you so much!
@media only screen and (min-width: 780px) {
/*In the below code nth-child(x) the value of x should be half the number of total menu items*/
#header .av-main-nav li:nth-child(3) {
/* Adjust the width of the logo */
margin-right:200px;
}#header .main_menu {
/*background: gold;*/
width: 100%;
left: 50%;
transform: translateX(-50%);
}.av-main-nav-wrap {
left: 50%;
transform: translateX(-50%);
}#header .logo {
left:50%;
transform: translateX(-50%);
z-index:999;
}#header .logo img {
top: 50%;
transform: translateY(-50%);
max-width: 140px;
}
}/* Header menu items */
#header .avia-menu-text {
font-weight: normal;
}/* Centre align Copyright socket text */
.sub_menu_socket {
display: none;
}
#socket .copyright {
text-align: center;
width: 100%;
}/* Make logo appear smaller on mobile and tablet resolutions */
@media only screen and (min-width: 780px) {
#header .logo {
left: 50%;
transform: translateX(-58%);
z-index: 999;
}
}
@media only screen and (max-width: 767px) {
.responsive .logo img {
width: 50%;
}
}/* Constraining image sizes in lower resolutions */
@media only screen and (max-width: 767px) {
.avia-image { max-width: 50% !important; }
}Hello Victoria,
The site is thrussells.com
Thank you!
Thank you very much Josue, Andy, Yigit, and Elliot!
You guys have all been really helpful, I appreciate it :-)
Kind regards,
Andreas
Hi Andy,
Thanks for your help, the scroll to top button works in portrait mode, but does not appear and disappears when website is viewed on mobiles in landscape mode.
And final question (no, really!) :P … for some reason, I have four 1/4 columns, but when resizing the screen from about 2/3 width to about 1/3 width of screen, the first column becomes really tiny with the second overlapping… just as in this image… https://www.dropbox.com/s/vchufytyovdk8wt/Size%20Problem.png?dl=0
Any ideas?
Thank you all so much for your time and patience :-)
- This reply was modified 9 years, 11 months ago by ruthnapal.
Hi Yigit,
I tried this and it doesn’t seem to display the button still on landscape (iPhone 6 Plus)
Also, in reference to the code shared by Elliot earlier to restrict the size of images, can I get it to target only specific images, because at the moment it’s shrinking the logo and squashing the Google map too.
Thanks! :-)
- This reply was modified 9 years, 11 months ago by ruthnapal.
Thank you for your help and time Elliott! :-)
One more question if you wouldn’t mind…
The “back to top” button activates on portrait mode on mobile, but does not seem to work on landscape (tested on iPhone 4 and iPhone 6 Plus).
Is this a problem with the theme?
Thanks!
Andreas
Hi Elliot,
* Request: Reduce width of large images at lower resolutions / landscape *
In landscape mode on the iPhone 6 Plus, images still look really huge (it’s fine in portrait mode). Can images be constrained so the images are smaller at this size too? This is how it looks in landscape on iPhone 6 Plus https://www.dropbox.com/s/admaczue2f6ttw1/image%201.png?dl=0* Request: Have logo stick to bottom of header at all resolutions *
The logo still floats from about iPad size until it snaps to the mobile size where the menu disappears. Can the logo remain touching the bottom of the header section at all resolutions? This is it floating at the moment: https://www.dropbox.com/s/sz1dmb4gg6ogvxi/image%202.png?dl=0* Request: Centre align logo when mobile header activates *
When the menu button appears, the logo also still is left aligned, could it be centre aligned? https://www.dropbox.com/s/c1fwh0br2bnuyfo/image%203.png?dl=0Thanks for your help Eliot :-)
Andreas
Hi Elliot, thank you for your reply.
1. Some code to limit the width (or have padding on mobile to force the images to be shrinked) would work! At the moment the images are really large on mobile screens – this is it Portrait on the iPhone 6 Plus: https://www.dropbox.com/s/pyue3yzaypl1iv3/Image%202.png?dl=0
2. It would be good if the logo could be bottom centre aligned when resized, as it keeps ‘jumping up’ and floating at certain points when resizing down. The two saints should be sat on the top of the next section, but aren’t at the moment. This is what it looks like: https://www.dropbox.com/s/v57wum4slgnjgro/Image%201.png?dl=0
Thanks for your help :-)
Andreas
December 15, 2014 at 4:27 pm in reply to: Image thumbnails with translucent play symbol for videos #368332One final question if you don’t mind, is there anyway to make the white playhead in the centre of the overlay symbol larger, to make it a bit more obvious that it’s a play symbol?
Here’s what it looks like at the moment: https://www.dropbox.com/s/t9c0k4y4ebzcgil/Small%20Playhead%20Icon.png?dl=0
Thanks! :-)
December 15, 2014 at 1:58 pm in reply to: Image thumbnails with translucent play symbol for videos #368259Hello Elliott,
Thanks for point this one out – works a charm.
Thank you for your help :-)
Andreas
July 8, 2014 at 9:50 am in reply to: Problem with whitespace appearing with transparent header #288370Hello Josue,
This code appears to have fixed the issue. Thank you and Yigit for your help with this!
Have a great day :-)
Kind regards,
Andreas
July 7, 2014 at 8:22 pm in reply to: Problem with whitespace appearing with transparent header #288155Hi Yigit,
Thanks for your reply – I’m using 10.9.4 – the latest version – with the latest version of Chrome.
The strange thing about this issue is that it is intermittent. Sometimes when I refresh the problem disappears. The problem also appears on other peoples’ computers using Chrome – but not always.
Do you have any knowledge of any other people with issues with the transparent header?
Thanks once again for your time! :-)
Kind regards,
Andreas
Devin, Ismael, thank you both very much, Your suggestions worked a charm!
Wishing you both a lovely weekend :-)
Andreas
Hi Ismael,
Thanks a lot for your help, I tried the CSS to make the headings more responsive and it worked a charm!
As for 2) – the clipping at the bottom of Icon Box titles – this is an example of where clipping occurs: http://www.dropbox.com/s/mc5ly7m756mj6x6/Clipped%20titles%20at%20bottom.jpg
As for the tooltips appearing on hover, I tried the code and they still appear for some reason. Any ideas? http://www.dropbox.com/s/66f35548obo0r70/Tooltip%20on%20hover.png
Thanks for the Google Maps suggestion, I checked the plugin out and the colour saturation of maps options don’t appear present as in the Maps element within the theme, but this isn’t an issue, I can always wait and see if the extra functionality is re-added in the future, no worries if it’s not!
One final question if it’s an easy solution, I’ve used background images for “Mentoring” and “About” – the aeroplane in “Mentoring” has a @2x graphic and I have the WP Retina 2X enabled which should swap out the graphics. I’ve experimented and the retina graphics don’t appear to be working, making the texture in the “PIG” section appear a bit fuzzy. Am I missing something obvious here?
Thanks a lot for all your help, have a lovely day :-)
Andreas
Ah, as soon as I said that, I refreshed and all is well, the underline only appears now when a link has been clicked!
Brilliant work Josue, right, I think it’s time I let you rest a bit now! Thanks once again :-)
Kind regards,
Andreas
I copied the code but the menu has become a bit unresponsive again (and the header image doesn’t appear – how strange!). Have I not copied the code correctly again, because I can’t spot any differences between your code and what I’ve pasted?
Thanks Josue!
Hi Josue,
I have a final request if you don’t mind. As the behaviour currently is, when you load the homepage, ‘Sell your home quickly’ is selected by default. Is there any way to have it so none of the links are underlined blue until they have actually been clicked? I don’t suppose there’s a way for the page to detect when you scroll past an anchor link, activating the blue underline for each section automatically as you scroll past it? No worries if the second or first parts aren’t possible, it’s more of a casual aesthetic thing.
Thank you :-)
Kind regards,
Andreas
Josue,
You are a very kind man, thank you so much for your time and effort, it is working as expected now!
Have a good night :-)
Kind regards,
Andreas
Hi Josue,
I placed the code at the very end of avia.js and the links still appear not to stay underlined when clicked. I reset Safari, emptying the cache too, and appears to still not work. I also disabled ‘WP Super Cache’ Plugin, is that what might be something that’s stopping it from working?
Any ideas?
Thanks!
Kind regards,
Andreas
Hi Josue,
Thank you very much for your help!
I have tried placing the code you shared at various points in avia.js, but when I refresh, the menu no longer shrinks, there isn’t an animated scroll down to the anchor links, and the blue underline of the links only appears when I hover over a link, but they don’t remain once I’ve clicked on the link.
I have probably just placed the code in the wrong place, I’ve left the code in avia.js, so if you see you will see what I mean. Do you have any ideas?
Thanks once again!
Kind regards,
Andreas
-
AuthorPosts