position a icon

[ianhaney]

Hi

I need to get a phone icon in the same place on different screen sizes on a website

I have tried using different css but at the mo I have currently have the following


<div class="header-phone-icon">
<img src="images/pic-1.png" alt="" title="">
</div>

I tried giving a id to the img itself with the following css but did not work


.header-phone-icon {
float: left;
position: relative;
}

#phone-icon {
position: absolute;
}

do I have to use different media query rules for the different screen sizes such as the following

768px – 980px for iPad and other tablets
980px and upwards for desktop monitors
1200px and upwards for larger desktop monitors

Reason is because I have a client whose website I done but was fixed widths so was all centered but he wants it to cover the whole width of the screen

Thank you in advance

Kind regards

Ian

[Beverleyh]

You might need Media Queries but it depends on the effect you want to achieve - "in the same place on different screen sizes" could be interpreted in different ways, and could be relative to the viewport or website layout.

You could try something like;
.header-phone-icon {
position: absolute;
top: 1em;
left: 1em;
}

But for specific help, we'd need a link to your page and possibly a mockup image to illustrate placement at a variety of breakpoints.

[ianhaney]

You might need Media Queries but it depends on the effect you want to achieve - "in the same place on different screen sizes" could be interpreted in different ways, and could be relative to the viewport or website layout.

You could try something like;
.header-phone-icon {
position: absolute;
top: 1em;
left: 1em;
}

But for specific help, we'd need a link to your page and possibly a mockup image to illustrate placement at a variety of breakpoints.

Hi Beverleyh

Thank you for the reply, appreciate it

I did try that but the icon is not in the same place horizontally on a 1280 screen size to a 1920 screen size

The link to the site I am doing is below

http://www.broadwaymediadesigns.co.uk/sites/coleman-barnett/index.php

I want the phone icon to be next to the phone number just to the left of it

Hope that helps

[Beverleyh]

I want the phone icon to be next to the phone number just to the left of it

OK - maybe start by putting the .header-phone-icon div inside the div that's holding the phone number - this would be one easy way to get the phone icon to "follow" the phone number, barring a bit of extra CSS and positioning - mostly display: inline-block; to make the icon sit alongside and not occupy its own line.

Another idea (probably better than above) could be to use a pseudo element. So you'd remove the .header-phone-icon div but add the image into a pseudo element that "follows" the phone number instead.

CSS for the pseudo element might look like this;


.header-number::before {
content: " ";
display: inline-block;
width: 1em;
height: 1.35em;
vertical-align: middle;
background: url(images/pic-1.png) center no-repeat;
}
Pseudo elements work in all modern browsers and IE8+

See how that goes and post back with the results.

[ianhaney]

OK - maybe start by putting the .header-phone-icon div inside the div that's holding the phone number - this would be one easy way to get the phone icon to "follow" the phone number, barring a bit of extra CSS and positioning - mostly display: inline-block; to make the icon sit alongside and not occupy its own line.

Another idea (probably better than above) could be to use a pseudo element. So you'd remove the .header-phone-icon div but add the image into a pseudo element that "follows" the phone number instead.

CSS for the pseudo element might look like this;


.header-number::before {
content: " ";
display: inline-block;
width: 1em;
height: 1.35em;
vertical-align: middle;
background: url(images/pic-1.png) center no-repeat;
}
Pseudo elements work in all modern browsers and IE8+

See how that goes and post back with the results.

Hi Beverley

The second option works perfect, thank you so much, so the following CSS tells where to position the image etc. so for example it tells it to position it before the header-number div, that right?


.header-number::before {
content: " ";
display: inline-block;
width: 1em;
height: 1.35em;
vertical-align: middle;
background: url(../images/pic-1.png) center no-repeat;
}

might be able to help bit further if ok, the client want's it to fit the screen instead of being centered so what I have done is take out the header divs and place them above the main wrapper div and with the footer divs I have placed them after the closing wrapper div tag so the header and footer go all the way across the whole width of the screen so it becomes responsive in a way, is that ok way to do it?

[Beverleyh]

so for example it tells it to position it before the header-number div, that right?
Spot on :) .element::before puts something before/left of, and .element::after puts something after/right of the element.

There are loads of fancy things you can do with them - take a look here for ideas: https://css-tricks.com/pseudo-element-roundup/


the client want's it to fit the screen instead of being centered so what I have done is take out the header divs and place them above the main wrapper div and with the footer divs I have placed them after the closing wrapper div tag so the header and footer go all the way across the whole width of the screen so it becomes responsive in a way, is that ok way to do it?Yes that's perfectly fine. The only thing I would say though is that you might find, on very wide/high resolution displays, the overall layout could get so stretched-out that it looks a bit awkward. Setting a max-width will give back a bit of control and you can do that on the <body> tag using your preferred width (whenever the content/layout starts to look iffy)


body { max-width:1920px; margin:auto }Possible max-widths = 1440px, 1760px, 1920px; You can roughly test how your layout looks on a mammoth widescreen with the help of the browser zoom setting. In Windows you can holding CTRL key and scroll your mouse wheel up and down, OR, press CTRL with the "+" or "-" key.

[ianhaney]

Spot on :) .element::before puts something before/left or behind the element, and .element::after puts something after/right or in front of the element.

There are loads of fancy things you can do with them - take a look here for ideas: https://css-tricks.com/pseudo-element-roundup/

Yes that's perfectly fine. The only thing I would say though is that you might find, on very wide/high resolution displays, the overall layout could get so stretched-out that it looks a bit awkward. Setting a max-width will give back a bit of control and you can do that on the <body> tag using your preferred width (whenever the content/layout starts to look iffy)


body { max-width:1920px; margin:auto }Possible max-widths = 1440px, 1760px, 1920px; You can roughly test how your layout looks on a mammoth widescreen with the help of the browser zoom setting. In Windows you can holding CTRL key and scroll your mouse wheel up and down, OR, press CTRL with the "+" or "-" key.

Thank you really appreciate the link and help, will check out that link now

I just checked it on my 1920 screen and looks ok and looks on my 1280 screen as well

One thing I wondered if could help me with is the following page, I think it would be better to have the content centered, on that page I got column-left and column-right divs, I know I could use margin: 0 0 0 5%; for example but 5% on the 1280 screen will have a different position when is viewed on the 1920 screen and so on, is there a way to have it centered and remain in the same place across all screen sizes?

[Beverleyh]

Sorry, I don't really understand what you mean.

Do you mean that you want to centre the 3 green tabs under the slideshow?

Try adding #wrapper { text-align: center; }

And then for each of the tabs, remove the margin and float, and set them to display: inline-block;

[Beverleyh]

BTW, #footercontainer is causing a horizontal scrollbar, so you might want to remove the width. Divs are block-level elements so they will fill the available width automatically.

[ianhaney]

Ahh cool thank you for spotting it and letting me know, i've removed the width from that div now, also it is the column left and column right on the contact page I would like centered, I have done it on my 1280 screen size but on my 1920 screen, it is still over to the left and not central so was seeing if there was a way to center it on both screen sizes?

[ianhaney]

Hi

Sorry been thinking about it and decided is best to not have the contact page divs centered as you say the client wants it fill the whole page so I have just made it so the content is over to the left