I created a landing page with Wordpress and I inserted this basic HTML code at the bottom of it :
<p> שיווק דיגיטלי createak כל הזכויות שמורות</p>
I apologize for the foreign language. :-)
I have always used this code, but for some reason now it's unclickable on this specific landing page: http://mickeyberkowitz.com/.
I have no idea why it's happening, any suggestions?
It looks to me like a CSS rule is making the container element for the final section (footer?) fixed, since there is no rule to hide the overflow-y the images show up fine however, the link is actually behind those images.
The CSS rule below fixes the container to 100vh however the content inside the container is much "taller" and so that overflows down. Your link is positioned directly under the parent element of the container and because the height of the offending container is fixed, it doesn't move down.
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
height: 100vh;
}
If you changed that CSS rule to the one below you'll see an improvement:
#media (min-width: 768px)
.elementor-section.elementor-section-height-full {
min-height: 100vh;
}
You will then notice the large space between the bottom of the "trophy" image and button - this appears to be a "spacer" element probably created by a page-builder plugin. I'd remove this if I were you. In fact, there appears to be another spacer below that as well, these create blank space that you may want to remove - depending on the desired aesthetics of the site.
I checked in your site. This is because, in your code other divs and elements are show over <div id="footer-bottom">
You need to add following code in CSS
#footer-bottom{
z-index:9999;
position:relative
}
This is a quick Fix.
But this may make other things non-clickable. So you need to adjust all your html divs and code properly with CSS.
Please use google chrome or firefox developers tool or inspect your code and fix divs that are overlapping each other.
Related
I've created a responsive webpage and everything is working fine. I mean the layout for mobile like smartphones and tablets is ok. If I switch to desktop it looks good too except for the footer and that's because there is an empty white space at the end of the webpage if I click on inspect the browser focus the HTML tag.
One thing you have to notice is that the height of this empty space depends on the width of the viewport. Also I'm using sass. I can't share all the code here because it's divided across too many files. If you want to see all the code go here: https://github.com/justanindieguy/podcast-landing-page
And also you can see the webpage in this github personal page: https://justanindieguy.github.io/podcast-landing-page/
Thanks a lot for all your answers. This is driving me nuts, I can't find the solution.
I tried the given solutions from others to make sure none already did the trick on your page, but no success.
I then found the reason you're getting the issue. It's related to the :before of the news section, it's overflowing from the element.
Try adding this CSS :
#news {
overflow: hidden;
}
Now the news section crops the :before element relative to its own dimensions.
I noticed you achieved the layout with skew, but I recommend you to look into clip path generators and create this shape that way.
Add this line to top of your CSS file
* {
padding:0;
margin: 0;
}
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
I had a programmer code a page for my site, but when we migrated the code to my site (on Shopify), some of the things stopped working. I've been able to fix almost everything, but the top banner is still giving me trouble.
I want it to fill the full browser width (like the other banner a bit further down the page) but it's being clipped to 970px wide. How can I fix this to make it responsive and fill the full browser width? I also want the whole page to be centered under the header.
And the code I'm using is here (I'm including the full code so I don't miss anything important): codepen.io/anon/pen/xZZwZN
When I run it in codepen it works, so I'm wondering if it's clipping it because of the page width coded into my Shopify theme. Any ideas on how to fix/override this on this page only?
Remove float : left from the css of .container .columns to center align.
After changing this, the page looks like below -
Hope that helps!
as i have seen in your site, you just have to remove float:left; from skeleton.css link for particular page
so go in this file and remove from .container .column, .container .columns this class and your site is ok :) If you can't find the class then note line no 26 in your css file.
Here is my site - http://www.aspenwebsites.com/majesticpines/about/
I noticed if I reduce the height of my viewport the bottom area of my sidebar (the one with email subscription field) overlaps my site's navigation.
I was wondering if there is a way to set up some minimum height for the site, so that if it reaches that value it shows scroll-bar on the right and doesn't reduce further, thus my email subscription form doesn't overlap with navigation links.
I tried to set up min-height:700px and overflow-y:auto for the BODY tag and also for .header-sidebar, but that didn't make any difference.
Could you advise what am I doing wrong here?
You could use css media queries.
// The CSS queries inside this #media will applied when the viewport height is lesser than 1001px
#media screen and (max-height: 1000px) {
// Reduce menu paddings and margins here
// Example:
.menu li {
padding:2px 0;
margin-top:3px;
margin-bottom: 3px;
}
}
The answer here is the one you have mentioned that it is not working - set correct min-height to some element. But you have to target the element which contains both navigation and the email subscription. If you set it to that element than it should work unless you are using some kind of wierd stuff which would overwrite its min-height (I can imagine javascript which would do this kind of stuff easily).
If you want more help then please share the corresponding code in fiddle where we can work the error out.
If you add "overflow-y: auto;" to your style for your <div id="navbar" class="navbar"> line (not to box-scroll which encases it), then a scrollbar will appear if the window isn't high enough to display your navbar. However the footer part of that area still overwrites the lower part of the scroll area. Is there a reason you separate the sign-up & copyright part from the nav? If you make it a part of the nav then it should just be part of the scroll area without overlap.
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.