need help with code/styles to translate website for mobile

  • Hi all,

    I am having trouble translating my website for mobile view.

    If the phone is turned horizontal, it looks good, but when the phone is vertical there’s a huge space to the right and the navigation menu is hard to see if someone doesn’t realize they can scroll to the left. My goal is to make this design clean in both directions on a mobile device or even a tablet.

    I’m wondering if there is a way to style/code these elements to be adaptable so that the site will translate from a computer/horizontal screen to a vertical view on a mobile phone?

    these are the major styles that I adjusted to get to this point:

    .grid-75 {
    width: 82%;
}

.grid-25 {
    width: 15%;
}

    body .grid-container {
    max-width: 1500px;
    min-width: 700px;
    } *this corrected the butchered sidebar*

    thank you for any support around this!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)

  • Hi @weedsandseeds

    The site has a horizontal scroll because there is a div that has a min-width: 700px and looks odd on smaller devices. To fix it quickly, I deleted the body .grid-container { min-width: 700px } line to allow a responsiveness behavior, but still, other elements are not adjusted enough.

    I suggest using a responsive theme that adapts depending on which device is viewed. Otherwise, you will need to adjust more elements.

    I hope this helps you.

    • This reply was modified 3 years, 7 months ago by Francisco.
Viewing 1 replies (of 1 total)
  • The topic ‘need help with code/styles to translate website for mobile’ is closed to new replies.

Tags