SPECIAL OFFER: Only $69 for access to everything in OSTraining for 1 year! You save $75! 
Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!

What would be some good breaking points for site?

4 years 4 months ago - 4 years 4 months ago #114874 by sbobofcs
WEBSITE: www.freedomcreativesolutions.com/d3designs/
Specific Problem: Trying to get the circles on this page to remain underneath each of the three lights depicted in the background image. However, I have found that when I resize the window, the three divs containing the three circles tend to wander towards the left and away from the lights . I believe the best way to fix this is to use responsive breaking points but I'm not sure whether I should go by certain display resolutions or go slowly through it pixel by pixel.

Main Question: Should I use certain breakpoints to achieve the fixed position I want?

Desired Behavior: Trying to get the circles on this page to remain underneath each of the three lights, no matter the screen size.

Please Log in to join the conversation.

4 years 4 months ago #114892 by Valentin
Hi sbobofcs,

Use media queries to set an specific look based on the scrensize.
I recommend base in max-width value of the screen.

For example:
@media (max-width: 768px) {
    .your-class-here{
        //your css properties here
    }
}

max-width: 768px means the CSS will be working on screens with that maximum size

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

4 years 4 months ago #114941 by sbobofcs
Thank you so much for the help

Please Log in to join the conversation.

4 years 4 months ago #114955 by Valentin
Hi sbobofcs,

I'm happy to help!

Kind regards,
Valentín

Follow us on Twitter - twitter.com/OSTraining
Like us on Facebook - facebook.com/ostraining

Please Log in to join the conversation.

Join today and get access to 1,000's of books and videos. Learn WordPress, Drupal, Magento, Joomla and more! Sign up today!