Pulling my hair out

Hobbsie · 30 Dec 2015 at 21:09

Hi all im hoping someone can help me with what i think is a simple fix.
Im no web dev but getting into it slowly.. anyway im adding some bits on my dads website to help him out.
And im having a issue were text is not re sizing when i shrink my broswer window, but the images i put in are.
The reason the images are is because i wrapped the whole thing inc text into a div and its class="wrapper_2"
in css i have....

.wrapper_2 {
margin-right:auto;
width:1250px;
}

which as i say works fine for the images but not the text.
Here is the web page im trying to achieve this.....
http://www.lampspares.co.uk/wiring-a-lamp-base-for-the-first-time/

Please go gentle on the coding i know its not pretty but it kinda works for now lol as i say im learning.

thanks in advance.

kayomani · 30 Dec 2015 at 21:11

Use max-width instead of width

Hobbsie · 30 Dec 2015 at 21:13

omg thankyou so much.

Hobbsie · 30 Dec 2015 at 21:13

you are my hero lol thats begin written down in my book right now lol thanks again.

Hobbsie · 30 Dec 2015 at 21:18

ok maybe i celebrated too soon, the text is ok but now the images are moving??

kayomani · 30 Dec 2015 at 21:27

#bc_un_switched_lampholder_image {
border-style: solid;
border-radius: 100%;
border-color: black;
float: right;
margin-top: -153px;
margin-right: 820px;
position: static;
}

You've floated it all the way from the right hand side of the page (Don't do that!). Bin all those styles other than the border and use "display: inline-block" at the div level where you have div>span>a>span>img. I'd also remove those spans you don't need them.

Hobbsie · 30 Dec 2015 at 21:38

ok thankyou so im adding this inline in the html section of the div? so under the style's part of this code??

<div><a onclick="window.open('http://www.lampspares.co.uk/bc-lamp...,resizable=yes,width=1200,height=900');return false;" href="http://www.lampspares.co.uk/bc-lampholders-without-switch/" target="_blank"><span style="color: #ff0000;"><img id="bc_un_switched_lampholder_image" class="bc_un_switched_lampholder_image" style="border: 3px solid black;" title="BC Un-Switched Lamp holder" src="http://www.lampspares.co.uk/product_images/uploaded_images/1003e-22091.1443037880.1280.1280.jpg" alt="1003e-22091.1443037880.1280.1280.jpg" width="144" height="144" /></span></a></div>

but remove the end span

kayomani · 30 Dec 2015 at 21:43

Hobbsie said:
<div class="lampicon"><a onclick="window.open('http://www.lampspares.co.uk/bc-lamp...,resizable=yes,width=1200,height=900');return false;" href="http://www.lampspares.co.uk/bc-lampholders-without-switch/" target="_blank"><img id="bc_un_switched_lampholder_image" class="bc_un_switched_lampholder_image" style="border: 3px solid black;" title="BC Un-Switched Lamp holder" src="http://www.lampspares.co.uk/product_images/uploaded_images/1003e-22091.1443037880.1280.1280.jpg" alt="1003e-22091.1443037880.1280.1280.jpg" width="144" height="144" /></a></div>

In the css file - don't just put it inline on the page:

.lampicon {
display: inline-block
}

You may also want to apply a margin property.

Hobbsie · 30 Dec 2015 at 21:47

ahh ok i get it thank you that's a lot neater.