can anyone find the solution to my problem? I've beed tweaking my CSS sheets and it doesnt seem like its changing anything. I'm using the same rules for the "4sites" image as to my "About" img.
Heres a link to the site, you can see all of my css sheets from there too.
https://dl.dropboxusercontent.com/u/146014194/483F_ss14/Pro01/hwk/pro01_content_structure_presentation_B02_responsive_4sites_FINAL.html
I know you can create everything in just one CSS sheet, but my professor asked us to make it like the way it is..
I added a div tag around the img thinking that I could control it better.. But it doesnt seem like its the case!
Mucho Thanks!
You're trying to keep the height of image as 100%. If this is a responsive design then, the width has to be 100% and height to be kept as auto
CSS:
#Mybio #Mepic img {
clear: none;
float: left;
height: auto;
width: 100%;
margin-bottom: 100px;
margin-top: 55px;
}
Now the question is, the image is taking the whole width of the screen, well, that's normal. You have to restrict the parent div(id as #Mepic) and handle it with media queries for different screen sizes. Also I saw float issues on you're site. Use Clear:both to get rid of them.
Related
I'm currently in the process of building a website and I am running into some trouble. home_page_ideal is what the page is supposed to look like ideally. My issue is with the little boxed image on the top left. When I scroll all the way up, the page looks like home_page_issue. The CSS related code is:
.logo {
padding: 38px 0;
}
img {
width: auto\9;
height: auto;
max-width: 100%;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
The bootstrap classes col-md-2, col-sm-6, col-xs-12 are also used for one the parent div. Not sure if it's relevant, but I figured it wouldn't hurt to mention it.
I would like the image to stay boxed on the top left of the page when one scrolls all the way up. I had a dummy image on there before and everything worked fine, but then I replaced it with the actual image needing to be there and this happened.
Could it possibly have something to do with the size of the image? I'm not sure but any help, hints, or lead would be greatly appreciated.
Give it a max-width or max-height so that way it won't get larger than a certain size. The auto makes it take up the width of the parent, and if the parent is col-xs-12, it'll be full screen.
Finally figured out what was wrong. It had to do with the size of the image so once I resized my logo everything was back to normal. The dummy img I originally had was 134 x 32, and my logo when I did the replacement was 1400 x 1235. In other words, my logo was just too big.
I'm not very good with HTML/CSS. Here is the website that I'm trying to edit. I'm unsure if this should be in WordPress Stack because even though my website is in WordPress, the problem is with the CSS. Also, I'm really sorry for bad English (I know 5 languages so its kinda hard to keep up).
The problem is that the grid (Essential Grid which displays a product catalog) and the container above it are both children of one div. When I try to change the padding of my grid, It changes the padding relative to the top of the parent div rather than instead of its sibling which is on top of it.
I'm not sure what CSS properties might be affecting this(I'm not very good at CSS) but I have posted the ones which I think might be the problem. Please visit the link and inspect element (Sorry..)
.child-on-top{
//acutal id on page is featured-111
width: 99.8936px;
height: 449px;
background-size: 100% 100%;
}
.child-below{
position: relative;
padding-top: 100px;
}
.parent{
//actual id is wrapper.
position: relative;
clear: both;
}
One solution that has worked so far is if I increase the top padding to about 500 px, that would add about 50 pixels of padding above the child element thats below. But that will only work in desktop. In mobile, you will get a lot of empty space. So it isn't really a solution.
Add folowing css and then check. Your div which have id featured-111 which take floating from class grid and because of this problem create. So write this css
#featured-111{
float:none;
}
Currently working on a landing screen where users choose a colour theme on the site. There are two coloured sides that 'grow' on hover giving the effect of colouring the website seen on a mockup infront. (Check out the Codepen below to get what i mean, it's kinda hard to explain fully)
Demo: http://codepen.io/BAWKdesign/pen/PPvRjz/
To 'color' the mockup two images are used placed over one other.
It needs to be responsive so I've given the back image width: 100%; height: auto; which is also used to dictate the size of the parent div.
The top image is set to width: auto; height: 100%; as using width 100% causes the image to stretch and not clip.
The problem is, the overlaid image appears larger in size as you can see in the link below giving a cut up image effect. Perhaps there are differences in how the size is calculated when you swap 100% and Auto around?
Hopefully this is just me having a brain fart and I've made a rookie mistake somewhere!
Images are by default inline elements meaning they naturally have some spacing around them. You are setting your other images to position: absolute which causes them to display similar to a block element - ie. no default spacing.
Simple solution is to add display: block to your image element:
.img {
display: block;
}
Updated CodePen
I'm working on a site that was developed by another person. This site is designed with wordpress by override a base theme(blankslate). This is the link:
http://www.good-look.it
There is a problem. When you resize the browser window you can see that the div with white background is responsive, but its not. On mobile the problem is more visible. I can't find a solution. Maybe is a problem with the plugin that manage the image slides(NextGEN Gallery by Photocrati)?
The problem is in this file: http://www.good-look.it/wp-content/themes/blankslate/css/struttura.css
There are numerous CSS styles with "!important" on them. For example:
wrapper {
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: top;
width: 940px !important;
}
The width of this container will always be 940px with the way you have it now. Turning this style off in Firebug "fixed" the "Brands" section. There are numerous problems in the CSS though that will affect responsive behavior.
First off, I thing we should be clear that the site is made with html, css, php, js etc --- so WordPress is really pretty irrelevant.
Most of the site isn't really planned in a way that is going to be responsive, but the specific problem of the white div, is that it is responsive, but the slider within - is not responsive, and uses absolute positioning --- so it's position is falling out of the parent div, and then making the content wider than the white div, and therefor wider than the window itself.
Did some quick styles in the inspector --- the slider's actually sorta "responsive."
replace
.wrapper {
width: 960px !important;
...
with
.wrapper {
width: 100%;
max-width: 940px;
...
and it will get you a little closer...
while designing a responsive site make sure that while defining width use %age instead of pixels like(940px). bcoz it arranges your div in %age according to your current device size but while defining width:940px it will take that amount of width irrespective of your screen size...
http://www.dirkdunn.com/web2
I recently made a responsive layout, setting the..
max-width:100%;
property in google chrome, which works perfectly for adjusting the header image size, however, in other broweser's such as firefox, the image overlaps the parent container on the left size.
I am familiar with scott jehls picture.js polyfill, however specifying the image size for each screen size sounds like a headache inside the picture tags, is there any way to combat this in other browsers similarly to how google chrome resizes this naturally?
or at the very least, is there some kind of math formula for knowing the right picture size via the browser width? thanks.
You have set the max-height of img to 100%, however you don't have the width of it's parent defined. So, it becomes confusing to the browser to determine 100% of what thing.
Let's give the parent a width -
#headlogo {
width: 100%;
}
Also set the margin accordingly, you might wanna use margin: 0 for #headlogo.
Simply remove the h1-parent of the image and it works. (FF 32)
Try this one
max-width: 100%;
display:block;
height: auto;
Assuming you are trying to center the logo.
I would remove the float: right from the H1 and remove the margin you have. Than I would add a text-align: center to the H1. This will solve your responsive logo issue and keep the logo centered.
Your Current CSS
#headlogo {
float: right;
margin: 0 15% 0 0;
}
Proposed Solution CSS
#headlogo {
text-align: center;
}