I have created a page using elementor page builder. when we preview the page on browser there is huge infinity white space below footer. Anyone have a clear solution for this
It has nothing to do with footer. It happens because the content (between header and footer) doesn't fill the whole screen (because it is short). To prevent that, make sure you have make the "height" of "Section" to minimum and then set it to "100vh".
My Woocommerce brand page header banner (Thumbnail) is not displayed in the original size, it is somewhat zoomed in. When I asked about that my theme support he wrote:
"That section has cover background image, so as per the nature it auto resize the image size to adjust and cover full container and also it is parallax, so it is better to have some more height in your image like 1920px X 1000px."
My image size was 1920x600.
When I added more height it does not fix this problem, because it again is somewhat zoomed in and loses quality, and also some part of image.
So - How can I make my Woocommerce brand page header image to be displayed in the real size, without this zooming effect? Without adjusting and covering full container? I should mention that this zooming effect is also seen in my main page header slider.
My image size would be 1920x600 and I wish that it is displayed in the original image size.
Thank you!
To fix this problem I added a CSS code:
.parallax-fix.page-title-shop {
background-size: 100% !important;
}
I've got a pretty specific issue I'm running into and the theme developer has gone MIA.
I have linked a screencap of what the issue is and I'll try and describe it as best as possible here, too. If more info is needed, just let me know and I'll provide as much as possible.
Screencap: http://tinypic.com/r/53le1l/8
I'm using a pretty modified version of this theme, but nothing that should have an affect on the functionality of the theme:
http://www.themes.red-sun-design.com/?theme=lemonchili
As you can see - the homepage is designed to display widgets, each in their own container, as opposed to a custom page layout (we're ignoring the top slider as that isn't an issue). The widgets that are included in the theme work just fine and size correctly with whatever content is displayed.
homepage layer structure is (from back to front): background image --> sidebar/menu & page background--> page content (slider and widgets)
The issue is, with third-party widgets/plugins and pretty much any interactive content, those containers do not expand correctly and end up leaving the majority of the content not visible.
I'm using the plugin EventON (www.myeventon.com) and if a month has 2 events, as shown in the screencap, it displays fine. (NOTE: when an event is clicked/selected a lightbox pops up with event info - this isn't an issue) But if a month has 2+ events, the box resizes to display the info, but does not resize to fit everything else on the page.
If you look at the original theme demo, each box has spacing between each widget.
When you look at the screencap, you'll see that the spacing goes away and the extra events are (I'm assuming) being displayed underneath the widget below the eventON widget.
What I need is to make each of those containers responsive to the content that is being displayed in each one, regardless of the placement on the page while maintaining the same spacing between each widget container. Also, the actual page background needs to expand to meet content too, which doesn't seem to happen.
I've been trying to find a fix for about a week and am completely stuck.
Does all of that make sense - if this is confusing or if I'm not explaining it correctly, let me know.
Thanks.
The template has a very stiff design because each content div section (Hours, Latest Images, Lunch Special, Next Event, The Latest, and About) are absolutely positioned within the container div, and as far as I can tell, overflowing content is even hidden at the bottom of the main content section.
Using the Red Sun Themes as an example: You are correct, the overflowing contents from the "Latest Images" section (where you have your plugin) is displaying underneath the "Next Event" section.
One quick solution is to give the "Latest Images" div (this is the one that holds your plugin) a higher z-index than "Next Event". That way, it will display on top of "Next Event", instead of underneath it. Luckily the plugin isn't overflowing by much. Remember to give a z-index to all 3 divs in the column. Example: z-index:10; for "Latest Images", z-index:9; for "Next Event", and z-index:8; for the bottom "About" div.
Next size the height of your div to always have enough room for the plugin. Min-width may work well.
Then move "Next Event" a few pixels down so the overflow from "Latest Images" won't overlap its top. You'll probably have to move "About" down too.
Once you move the other 2 divs down, the bottom div might push past the bottom of the container, and its bottom contents may be hidden. One solution is to decrease the height of the divs by reducing font sizes/padding... Another solution is to increase the height of the main div that's directly under the container div. It looks like the height is in the html code too.
Note: From this end it appears that the template holds the div styles in the html code, so you may have to make your adjustments (z-index, top positioning) there.
Another solution would be to add a scrollbar (add width, and overflow:auto;) to the "Latest Images" section, so when the plugin overflowed, there would be a scrollbar. But then the content area would be effected by the size of the scrollbar.
I have my wordpress theme built but there is one problem, I want to have an image behind my footer but not be part of it. In my site I have my footer image that repeats horizontally and an image behind it which is a compass. My issue is when I put the image in it acts like part of the footer and not the background (it's not my background image just on top of it). Here is a link to my blog (the code is too long to post here):
http://blog.zombiesarefierce.com/
also here is a pic of what my footer is supposed to look like (the image i'm talking about is the compass), any help would be greatly appreciated:
http://www.freeimagehosting.net/jq19y
Just put your compass image in a new division and apply z-index to all elements at that point. Z-index specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order. (Negative numbers are allowed)
Check this link to know more about z-index.
I am trying to adjust my Wordpress theme, and I've created a child theme based on twentyeleven. The main issue I have right now is with the width.
Please take a look at a live sample I created using just HTML and CSS. This is what I am trying to make my wordpress theme look like:
http://danapaigetrentlage.com/cfsa-comps/lff-profilepage.html
I want the page width to be 100% so that the sky background and white-wrap bleed horizontally off the page, but I also want the content to be centered within the page.
You can see how far I've gotten towards this goal by looking at my wordpress site:
http://danapaigetrentlage.com/cfsa-test/
You can see the page is wider than 1000px (the theme's default width), but still not full-width, and there's a horizontal scrollbar, instead of the content just being centered.
I'm just not sure what I'm doing wrong here. Any ideas?
Thanks,
Dana
Looks like it's just a case of setting body's padding to 0.
body {
padding: 0;
}