Forum Replies Created
-
Posts
-
Andy,
Thanks.
Somehow those two callouts got lost in all the back and forth. That worked a charm.
Thank you for hanging in there.Andy,
Thanks. SO the div#text-6 and -5 appear to ffect position of widget on mobile or media screens.
I got that position worked out.
The desktop and tablet (screens wider than 767px, the widgets are both overlapping each other again.
I have played with the following code:
#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}#text-6 {
transform: translate(100%);
}which I though was for positioning of widgets on desktop-type display, but there are not moving.
Here is a screenshot:
That did not work for a desktop.
However when I tried the following:
I removed this bit of code from above:
.page-id-734 #main {
padding-top: 200px !important;
}
On the Header Size I kept the custom size
On Header Behavior I have all the Sticky Header options unchecked but do have the Let logo and menu position adapt to browser window box checked.It works perfect on a desktop and tablet but on a mobile, the mobile menu disappears on sub pages and the menu background is large.
Here is what the homepage and a sub-page look like on a desktop with the changes above.
Here is what I see:
HomePage – Desktop
SubPage – Desktop
HomePage – Mobile (Android)
SubPage – Mobile
I’ll leave this code in place for now till you can check as this is the closest to getting everything correct that has been achieved so far.
Thanks.I did and everything seems to be working on both issues.
You mean you don’t remember every support ticket you handle? You’re actually human like the rest of us?
Again thanks Ismeal for this time and all the others you have been of service. I am very grateful.Thanks Ismael.
That entire code block was given to me by you in this thread: https://kriesi.at/support/topic/move-post-slider-text-content-into-thumbnail/Removing it seems to do the trick and the issue that the other thread was addressing does not seem effected.
So both seem to be solved.
If you want to share what the thoguth was behind that bit of code, I am always happy to learn.
Thanks again.Andy,
I am afraid I may have over-complicated the matter. When I stack all the CSS related to this I have the following:
@media only screen and (max-width: 767px) {
header#header {
height: 400px;
}div#text-5 {
top: 83px !important;
left: 125px !important;
}div#text-6 {
top: 207px !important;
left: -126px !important;
}
}@media only screen and (max-width: 767px) {
.responsive #top #main {
top: 275px;
position: relative;
}
}@media only screen and (max-width: 767px) {
.responsive .logo img {
max-height: 60px;
}
}#header .widget {
left: 50%;
padding-top: 0;
position: absolute;
top: 0;
transform: translate(-50%);
z-index: 999;
}#header .widget {
margin-top:20px!important;
color:#ffffff!important;
}Together it does not display correctly. Is there something in all this that I should have removed or modified?
Ismael,
Please excuse and Support Protocol I violated. I was not aware.
As to the issue, the code did not appear to change the issue.
When a page loads and I am at the top of a sub-page, I still see the full height os the header space as you can see here:
As soon as I scroll down, the space goes away and it looks like I am hoping to have it look when a sub-page loads with tjust the nav bar in place like so:
Hope that helps clarify.
Thanks.Hi Ishmael,
I am not sure why, but on my mobile, an Android (LG-G2 specific), I am still seeing the offset as shown here:
To be clear, I am still implementing both sets of code correct?@media only screen and (max-width: 767px) {
.responsive #top #main {
top: 275px;
position: relative;
}}and
@media only screen and (max-width: 767px) { .responsive .logo img {
max-height: 60px;
}}Yigit,
I’m sorry but I noticed that the additional functions.php code has caused the color section that was above the post sliders and below the top full width slider to move below the footer.
Any thoughts as to why?Removing all the Quick CSS and deactivating plugins does not affect it.
I did remove the functions.php child theme though and it corrected it.
The problem appears to be in this block of code which was suggested to me by Ismael in order to get the post titles to appears on the thumbnails on the homepage sliders.
// slide link
add_action(‘wp_footer’, ‘ava_new_custom_script’);
function ava_new_custom_script(){
?>
<script type=”text/javascript”>
(function($) {
function b() {
$(‘.slide-entry’).each(function() {
var content = $(this).find(‘.slide-content’).detach();
$(this).find(‘.slide-image’).append(content);
});
}b();
$(‘#av_section_2’).appendTo(‘#main’);
})(jQuery);</script>
<?php
}Can you tell me what the conflict might be?
Andy,
That seems to work for maintaining the hompepage, but on the sub-pages, as soon as you start scrolling, the height of the container appears but just filled with the background color. The nav does stay stickky to the top though.
Here is what I mean:
Hi Andy.
So it’s getting there. Here is a screenshot:
The text 5 widget appears below but a bit off center and the text 6 widget is below that but pushed off the screen to the left.
Thoughts?Thanks Josue.
That seemed to solve everything but the text alignment.THe element floated left is aligned to top and the element floated right is aligned to bottomAndy,
That seems to do the trick of getting the widgets to move below the header and be stacked, but it is dropping them over the content below. In this case the full width slider.
Is there a way to have it remain in the logo area of the header so it forces the image to expand vertically and the widgets appear below the logo and above the full width slider?
Thanks again for your expertise in this.Here is a shot of what a sub-page looks like now:
Here is what looks like on a tablet or full screen:
Here is what it looks like on a mobile without hiding the widgets
http://dev.orangevilla.org/wp-content/uploads/2016/05/mobile-current.jpg:
The widgets get pushed over the logo area and the mobile menuHere is what I would like it to look like on any screen < 1000px wide.
http://dev.orangevilla.org/wp-content/uploads/2016/05/mobile-desired.jpgYou can see the same kind of idea here:
https://www.gracechurch.org/ when you look at the site on a mobile device.Hope that helps.
Thanks for even bothering to look at this. I do appreciate it.Ok I see how to make it static. Just need to get a default overlay instead of the icon. I will work on it but any clues are appreciated.
Wow. Would never have gotten that on my own.
Thanks.
Currently the title now appears when I mouseover.
How do I get it to be there in normal state?Geez. Thanks.
Ok So that idea of hiding one as the screen width gets smaller, but still it leaves the visible one on top of the logo and menu when it gets to a mobile device size.
SO I can play with the where to hide and hide both of them, but is it possible instead to have them shift to be below the logo area as stacked elements when the width is 767?Josue,
That had an interesting result. I understand the code but the result was very weird. It pushed both widgets to the left of the screen and pushed the logo down even at higher widths above 767.
I am going to leave the CSS in place so you can see.
Let me know your thoughts.
Thanks again for your effort.So here is how it currently looks:
Here is what I am hoping to do:
The idea to move the Title and read more onto the thumb and to add an overlay to whatevery the feautred image is or if no featured image, just to show the overlay.
Dev URL is below.Thanks
Josue,
Thanks. Learned a CSS selector I did not know existed. I had to add !important but it did work.
However, when I re size display, the widgets shift and overlap each other. On a mobile screen for example they both completely overlap the logo.
Is there a way to contain them in their relative position so they just re scale?
