Design help please

[AidanLCFC]

I'm a bit thick with all this stuff so really need some help. I'm building this site http://bookmakersuk.org.uk/ and you'll see the terms and conditions section with each offer. Now as I have a couple of sites, and will be more following this template, I had the brainwave to 'snip' the terms so I could have them as an image and have the image on other sites without it triggering any duplicate content issues.
Now I've tried this, done a snip, saved, opened, copied on a new site and then it was a larger random size that didn't fit.
Did it again, opened it and saw 'view actual size', thought I'd cracked it but it's came out oversized again and not actual size. Any idea's please people?

 

[dfiocch]

Let me see if I understand correctly...

You have the "T&Cs" portion.
You made a "screenshot" of that portion.
You pasted this portion into other websites.

Correct till this point?

If so, just check if you declared the width and the height of that image in the html code:

<img class="your-img-class" src="your-image.png" height="100" width="100">

Otherwise, do it in CSS (your.css example):

.your-img-class {
height: 100px;
width: 100px;
}

If you do not declare h & w, maybe some other HTML code or CSS could "stretch" your images.

 

[BetOnlineUK]

Hey dfiocch, I have a similar query but on a more responsive note. Where I had one size for desktop then another image for mobile which would be a different orientation (portrait instead of landscape) would you know the code to achieve this?

 

[AidanLCFC]

Let me see if I understand correctly...

You have the "T&Cs" portion.
You made a "screenshot" of that portion.
You pasted this portion into other websites.

Correct till this point?

If so, just check if you declared the width and the height of that image in the html code:

<img class="your-img-class" src="your-image.png" height="100" width="100">

Otherwise, do it in CSS (your.css example):

.your-img-class {
height: 100px;
width: 100px;
}

If you do not declare h & w, maybe some other HTML code or CSS could "stretch" your images.

pretty much, it just seems it doesn't save as the correct size.

it's got the sizes in the code so going to have to work out how to keep it the exact size going from A to B

 

[BetOnlineUK]

Didn't want to butt in on your query mate, but I know having basically the same terms plastered on the page can only be harmful. So I too have been looking at making images.

 

[AidanLCFC]

Didn't want to butt in on your query mate, but I know having basically the same terms plastered on the page can only be harmful. So I too have been looking at making images.

no problem pal, we're all here to learn/help

 

[dfiocch]

Hey dfiocch, I have a similar query but on a more responsive note. Where I had one size for desktop then another image for mobile which would be a different orientation (portrait instead of landscape) would you know the code to achieve this?

You could use "media queries" in your CSS, example:


@media only screen and (max-width: 800px) {
.your-img-class {
height: 100px;
width: 100px;
}
}

Which means you're telling to a browser to resize the image to h100 & w100 according to the (device) screen size.

A media query can be vary from device to device (screen w & h) and by orientation (portrait or landscape). Just google around, you can find a solution for your needs pretty easily.

 

[dfiocch]

pretty much, it just seems it doesn't save as the correct size.

it's got the sizes in the code so going to have to work out how to keep it the exact size going from A to B

So, the problem is with the "screenshot"...

 

[AidanLCFC]

So, the problem is with the "screenshot"...

guessing so, obviously when I've took the screenshot I've saved it. Open it to copy and paste and it's larger, saw the view actual size and it goes to correct size, copy and paste and it's still comes out as the larger version

 

[baldidiot]

Do you want to stick an example up on the site on a test page? Much easier if we can see what's going on.

 

[NDG]

Much better to use the actual image code to add an image into a post or page,
where you can set the actual size that you want for the image. I've never copied
and pasted an image into any page, and I can see how that might not go well.

I always size up the image exactly how I want it in an image editor and then
add it to a page. If you make it bigger and resize it using the image code, then the
file size will be larger than needed and it will take longer for the web page to load.