responsive website giving major issues

[divinedesigns1]

So i have been editing this website over and over again from resolution 240px to 1680px and it looks great on my desktop but soon as i place it online it keep on messing up the placement for certain divs on the website.

 

can someone take a look and let me know what the H im doing wrong?

 

www.divinedesigns1.net

[Ingolme]

I checked the site and it looks functional to me. I can't know which divs are misplaced unless you tell me what it's actually supposed to look like.

 

I recommend resizing your images because they take forever to load. You're loading images thousands of pixels in length to only display it in an area of a few hundred pixels across.

[divinedesigns1]

I checked the site and it looks functional to me. I can't know which divs are misplaced unless you tell me what it's actually supposed to look like.

 

I recommend resizing your images because they take forever to load. You're loading images thousands of pixels in length to only display it in an area of a few hundred pixels across.

alrite, ill create some smaller images, but you see where the shopping cart is located, theres a div which holds the amount of items within the cart

[Ingolme]

This looks like it's out of place due to using absolute positioning. I'm not exactly sure where it's meant to be, but if you want it next to the cart you can make it a span, or you can display it as an inline-block.

[divinedesigns1]

This looks like it's out of place due to using absolute positioning. I'm not exactly sure where it's meant to be, but if you want it next to the cart you can make it a span, or you can display it as an inline-block.

it suppose to be in that green circle of the shopping cart image

[Ingolme]

If you make the shopping cart a background image then you can use a combination of line-height, text-align and text-indent to put it into place.

 

The code would be something like this:

.cart {
  background: url(/images/shoppingcart.png) no-repeat center;
  background-size: cover;
  width: 54px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-indent: 6px;
}

You'll have to tweak the values to get it in the right place.

 

It's not a good idea to have a <div> inside an <a> element.

[divinedesigns1]

If you make the shopping cart a background image then you can use a combination of line-height, text-align and text-indent to put it into place.

 

The code would be something like this:

.cart {
  background: url(/images/shoppingcart.png) no-repeat center;
  background-size: cover;
  width: 54px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-indent: 6px;
}

You'll have to tweak the values to get it in the right place.

 

It's not a good idea to have a <div> inside an <a> element.

alrite, i appreciate it

Ingolme

[divinedesigns1]

If you make the shopping cart a background image then you can use a combination of line-height, text-align and text-indent to put it into place.

 

The code would be something like this:

.cart {
  background: url(/images/shoppingcart.png) no-repeat center;
  background-size: cover;
  width: 54px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  text-indent: 6px;
}

You'll have to tweak the values to get it in the right place.

 

It's not a good idea to have a <div> inside an <a> element.

this worked perfectly, thanks again