• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 407
  • Last Modified:

css and html positioning of an image element

I am building a site here.  http://162.211.82.64/~ledgers/ Simple html and css.   I have placed the logo to the left of the LEDGERS4u title.  However, I have used absolute positioning so it moves around from device to device.  How do I position this properly with css and html so it stays to the left of the LEDGERS  and I make it all add up title?
0
livewirewebsolutions
Asked:
livewirewebsolutions
  • 4
  • 4
1 Solution
 
GaryCommented:
Move <div class="logo-white"></div> just after the opening H1
Amend the margin and left like so
   left: 0;
    margin: -50px 0;


Tweak as required.
0
 
livewirewebsolutionsAuthor Commented:
like so? see now.
0
 
GaryCommented:
No, that's not working
Move it to just before the Ledgers 4u span.

Remove position and left from the .logo-white {} css
Add display:inline-block;
Change the margin to
margin: -60px 0;

You will have to hide it at smaller screens as there is no room for it.
0
Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

 
livewirewebsolutionsAuthor Commented:
mmmmm.  Why is it not working.  It seems to be working perfectly here on a 13" mac and a 19" pc??
0
 
GaryCommented:
Not once you go down to smaller screen sizes (800px).
0
 
livewirewebsolutionsAuthor Commented:
ok.  I have made the changes.  How do i remove when a mobile device is browsing the site?
0
 
GaryCommented:
Add to the css

@media only screen and (max-width: 767px) {
.logo-white {
display:none
}
}

Open in new window

0
 
livewirewebsolutionsAuthor Commented:
got it.  awesome thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now