So I've never styled an iframe before! Obviously you grab it's element name, class or Id and style it like normal however I'm having troubles styling it over the element.style styles that have been placed on it by a wordpress plugin. There's got to be a way to make this iframe a bit more responsive than it is now.
Visit the website here, then scroll to the bottom and hit the "CALCULATE" button under the MORTGAGE CALCULATOR. I'm trying to give this iframe a bit of a responsive touch as it has none right now.
I thought if I just styled it's id name then it would be fine but no luck! Then I tried just iframe.
html #MLCalcFrame {
border: 2px solid red !important;
width: 100% !important;
top: 0 !important;
left: 0 !important;
}
html iframe {
width: 100% !important;
border: 2px solid orange;
}
What would the best way be to add some responsive styles to this iframe?
Related
I was supposed to correct the issue with responsivesness on mobile for this site. At this point I need help to figure out why this website behaves like this on a mobile view. I cannot figure out why there is horizontal scrolling the landing page.
Its due to the social icons Css
Just paste that in your theme custom style.css
.norm_row {
left: 0 !important;
right: 0 !important;
width: 100% !important;
text-align: center !important;
}
So, I'm working on my Wordpress theme for my personal website, and I'm stuck trying to figure out how to do a couple things:
1) I need for the white to extend above the top edge of the page content
2) I'd like for the container to extend to the bottom edge of the viewport if possible.
I'm using Twitter Bootstrap for all of my layout stuff. Source is viewable by normal means, etc.
I tried using min-height: 100% in various places, haven't had much luck. Maybe it just wasn't in the right place, who knows.
Thanks ahead of time for any response!
To get the white to extend to the top, remove padding-top from the .page-container and add it to page-outline instead. Also add height: 100% to the page-outline.
So your CSS looks like this for page-container and page-outline:
.page-container {
min-height: 100%;
}
.page-outline {
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
padding-top: 25px;
height: 100%;
}
I have the folowing HTML:
Wardrobe
Wine
Coffee
This is the relevant CSS:
.home-block {
background-color: #c2b89c; display: block; height: 180px; line-height:180px;
text-align: center; font-size: 70px; color:#e2e2e2;
text-shadow: 2px 2px 0 #444; margin-bottom: 20px; background-size: cover;
background-position: center center; box-shadow: 1px 1px 4px #111;
}
My result now looks something like this:
That's OK, but what I really want is the blocks to have a solid color, and only show the image on hover. Like so:
Please keep in mind that I'm using a responsive design, so the blocks will have a different size and aspect ratio on different screen sizes. That is why I'm using background-size: cover. Also this is for a CMS system, so I want the images and colors to be set inline in the HTML, so it will be easily editable and more blocks can be added.
So I basically need a clean solution without absolute positioned elements (because they tend to break if there's no fixed width) to achieve this.
What I have tried is this:
.home-block { background: none; }
.home-block:hover { background: inherit }
but with no success. I was just about to fix all of this with some lines of jQuery, but I just quickly wanted to check if there is no pure CSS way to achieve this.
It's a little bit tricky if you need to have background-image set inline in HTML. You can't overwrite it easily. What I would try to do is to change background-position on hover:
.home-block {
...
background-position: 1000px 1000px; // background-image is there but not visible
}
.home-block:hover {
background-position: center center !important; // make it visible
}
http://jsfiddle.net/h2Jbg/
So for normal state you will not see background image but will see backgroud color. On hover you move image back.
Unfortunately it's not possible to use the :hover pseudo-class inline, which makes it hard to accomplish this inline on a single element.
It is often a bit ugly to use an additional element for the purpose of styling, but at least it is a possible solution to the problem at hand.
<div style="background-image: url(http://lorempixel.com/400/200);">
<div class="home-block">Foo</div>
</div>
You could then use something like this in your CSS:
.home-block:hover {
background: transparent;
}
Demo
This way, you will be able to add new blocks with individual background-images, without updating the stylesheet.
We have this annoying layout issue. Please see the following url to see it in action:
http://www.businesseventsydney.com.au/home-page-test.cfm
The FB like buttons are neatly situated in the top nav bar. But, as soon as you click "Like" and enter a comment, the buttons drop down below the nav bar. If you refresh the page, the buttons appear correctly again.
Can anyone shed any light on this?
Simple fix:
.fb-like {width: 128px !important;}
Hi now define height of your iframe css as like this
.fb_iframe_widget iframe{
height:244px !important;
border-bottom:solid 1px #000;
}
!important must give to this
Result is this
The element changes from having a width of 129px before liking etc, to having a width of 450px after liking.
So, you will have to make it fit into your design in a spot that allows for the worst case scenario, ie, 450px.
Just change your #top-nav-right css rule to:
#top-nav-right {
float: right;
overflow: hidden;
padding: 4px 125px 0 0;
width: 129px;
}
I have got rollover images setup on a site i'm building using css background images like so:
.rollover a {
display: block;
width: 400px;
height: 400px;
background: transparent url(hover.jpg) no-repeat;
}
.rollover a:hover {
background-position: -400px 0;
}
This works perfectly on all browsers however on the iphone i seem to get 1px extra on the right hand side (so it's showing 401px rather than 400px) so I end up with 1px of the rollover image displayed on the main page which is obviously incorrect. If anyone could suggest any reason why this might be happening i would be immensely grateful.
Thanks very much as ever everyone!
Dave
Try adding this .rollover a {overflow:hidden}