Text gets on top of image while resizing browser

Question

I am working on a webpage using HTML and CSS. When I have my browser in full screen, everything looks good. However, if I resize my browser, the text shows up on top of the image. I have tried to google about this, but did not get any resolution. Has anyone experienced similar situation, and knows of a solution? Please share your thoughts.

The code is in the link: http://jsfiddle.net/eJyZs/

Btw, I am using SimpleGrid as well. http://simplegrid.info/

Answer 1

I think you have made mistake in CSS.

It's image Position problem. so, change your style sheet.

for example: position:fixed; top:30px; right:5px;

so, change position fixed to anything you want... for more help look at here.. http://www.w3schools.com/Css/css_positioning.asp

Answer 2

Hi now used to Media Queries for Standard Devices

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

more info