I've added the Nivo Slider to a website and made some CSS modifications. When the site is viewed in IE9 however, there is a large black square covering the left-hand side.
http://genesisoak.com.au/
All of my CSS adjustments so far have been in vain, so I'm turning to you guys for help.
Thanks!
Add to your section class "slide" (.slide) this CSS property (in your stylesheet document)
right: 0;
This property will attach the section to the right of the page and will solve the problem.
That's all you need.
Related
So an old friend of mine who knows nothing about programming asked for help with his site. someone has built it for him long ago, here it is - http://challengetours.org/
The problem is with the site's width.
As you can see there is a scroll bar at the bottom of the site, which leads to a huge empty space.
There is no problem with that in particular, but when you open the site on mobile it's zoomed-out to see the whole site including the empty area.
what would be the easiest way to solve this ? I have some background but I've never used WP/JS/PHP/CSS :)
Thanks,
Itai
If WebElaine's comment above doesn't work, you can do the following.
You have two elements setting rules in the CSS:
Your div with id ___plusone_0 has an inline style set to "left: -10000px;".
Your iframe with the id st_gdpr_iframe has an inline style rule of "left: -5000px;".
Removing these two styles gets rid of the scrollbar.
If you are using Wordpress but aren't too familiar with it, you can add your own CSS IDs allowing you to target these elements and override the inline styles if there's an issue with the Wordpress theme itself that you can't otherwise access.
For example:
#st_gdpr_iframe{
left: 0px;
}
#smthemes_share .inner{
left: 0px;
}
I'm building a website with WordPress. The theme I used is enfold.
My problem here is that when I open the website in mobile mode, the cart icon is placed on the logo.
I reviewed all the store-related options, but the problem was not resolved. How can I fix this problem?
It's not easy to help you without the actual code. We need at least the HTML that creates the header of your template. But, this will probably do the trick.
Resize your browser window to a mobile screen size
Right click somewhere on the screen and choose to inspect (if you are with Chrome)
Find the cart icon on HTML code and get his class name
Add the following CSS rule either on your style.css child theme or on your theme options page for custom CSS
.cart-css-class {
float: left;
}
This will move the icon on the very left side of the screen. You can try different CSS rules like float: right or position: absolute.
As I said, it's not easy to give a 100% correct answer without a link to the website or the code of the header.
I'm fairly new to HTML and CSS work but have been very proud of how far I've come with the help of forums like this one. So first and foremost, thank you!
My question: I am using a Colorbox on my website that displays a popup on top of the current page. The problem is, if I scroll with the mouse wheel and the pointer is resting in the grayed out area (the original page I opened the colorbox from), the original page scrolls down...thus eventually moving the colorbox off the screen.
What I want is for the colorbox to always be visible in the middle of the screen, regardless of how a user scrolls. The only way to get rid of it would be to close it.
I've read a lot about using the position:fixed attribute, and have attempted to do that but had no success (tried surrounding the colorbox with a simple div with a "position: fixed" setting). Plus in looking through various comments is seems like the fixed position is something that should be used sparingly, if at all.
Does anyone have a suggestion on a div I can create to keep the colorbox positioned on the screen at all times? Or maybe an alternative idea, like preventing the ability for a user to scroll down the grayed out area of the original page?
Here's a link to the page that displays the issue. If you click on one of the dozens of sample story links, you'll see the colorbox appear. When it does, start scrolling down the original page and you'll see the box eventually goes off the screen.
Any advice would be greatly appreciated everyone. Thank you!
The problem is that the Colorbox Javascript appends inline style to the box which will override external or internal CSS. Give your property values !important to prioritize.
#colorbox {
outline: 0 none;
position: fixed !important;
top: 10% !important;
}
I have gone thru the site and searched for the last two hours and am trying to get a wordpress site to work correctly. Everything is working except the white box that holds the content will not go to the bottom no matter what I try. I have tried all the options here but I think it may be that I do not understand enough about css or the divs are all messed up from the template. Can someone please help out with what I have crossed. My page is located at http://craftedimages.com/AA/aae-events/ and you will see the white box on the right that does not extend down. I got this template and have been modifying it of which there were already lots of problems. Thanks for your time ahead of time.
Try adding
#page{
height:1035px;
}
..to the css - the sidebar is this height and although it is auto that is the given height
Hope this helps
Using chrome inspect element. I can see that your <div id="wrapper"></div> has the style
height:auto;
set it to
height:100%;
That should fix it. Only do that for this page. The other pages are set to auto because it forms to their content. This page doesn't have enough content to reach the bottom like the rest of the pages.
I'm new to wordpress and website building. Just bought a theme and faced an issue.
I want to put my image over accordion div container. How I can do that? My theme has content building option, but as far as I know it doesn't support creating layers feature (nor any other content builder plugins, like this or this
I would really appreciate any kind of help!
If you find a way to customize the CSS, this should do the trick:
.column.one {
position: absolute;
z-index: 2;
}
The property position:absolute allows you to position the image freely using the CSS properties top, left, right and bottom.
z-index:2 makes sure, that the image is in front of the accordion.
Edit:
Turns out that there is one more problem: since the image overlaps the accordion, the overlapped areas are not clickable anymore. To solve this problem, you can use the CSS property pointer-events:none. But beware! This is not supported by IE and Opera. You may need to find a workaround for these browsers.
Browser Compatibility Table: http://caniuse.com/pointer-events
Article about the Property: http://www.sitepoint.com/css3-pointer-events/