Mobile style broken?

  • epwolfie

    (@epwolfie)


    8 years, 3 months ago

    Hello,

    I just checked my site on the phone after going too long without, and it seems that many elements of the home page, which work fine on my laptop, are not working the way I want them to on the phone or tablet.

    First, when I narrow my screen to tablet width, my header disappears. An arrow is there; if I click it, the header reappears, but now the two elements are too big–and completely rearranged! I’d like both the logo and the text in the header to reduce in size consistently, stay visible, and stay in order. Is that possible?

    My second problem seems to be essentially contrary to the above issue. In the body of the home page, I have several div’s with two or three smaller divs floating next to one another. On the phone, the photos associated with those smaller divs are tiny tiny, while the text, again, is too big. The result is that the texts overflow onto one another. I’d like these floating elements to align one *above* the other when the screen gets small, not to remain beside one another.

    Can someone help me? Is there a @media call that I’ve just messed up?

    Thanks.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • siniplyrathemes

    (@siniplyrathemes)

    8 years, 3 months ago

    Hi @epwolfie.

    Thank you for contacting us and I’m sorry to hear that your website has issues on mobile/tablet device.

    I’ve tried to visit the website you posted, but it couldn’t be found.

    Could you please doublecheck the address?

    Kind regards.

    Thread Starter epwolfie

    (@epwolfie)

    8 years, 3 months ago

    Hmm … the link doesn’t seem to work. But if you type in the address (capital C in Clean), that should work.

    Thank you!

    Theme Author lyrathemes

    (@lyrathemes)

    8 years, 3 months ago

    I think the URL was a .org, and you typed .com? Is this your website: http://www.artsandtorah.org/Clean/?

    You’re using a child theme and several inline styles, looks like the theme has been modified? The main Kale stylesheet is not loading correctly at all for you.

    Thread Starter epwolfie

    (@epwolfie)

    8 years, 3 months ago

    How embarrassing! I’m just having a great day.

    I have added a batch of CSS in Additional CSS, and I’ve used some plugins …

    Should I just delete everything?

    Theme Author lyrathemes

    (@lyrathemes)

    8 years, 3 months ago

    No worries! Thanks for confirming. I think if you’re starting from scratch, lets remove all CSS and any unneeded plugins and then work from there.

    Thread Starter epwolfie

    (@epwolfie)

    8 years, 3 months ago

    Hi! Just wanted to follow up from a few days ago. I’ve removed the child theme, deactivated all plugins, and deleted my additional css. Then instead of putting content in my header widgets, I created a banner and uploaded that as a logo. That got the header working properly.

    As to columns in the body of the page, they work just fine if I don’t specify the width property. If I use the css “width:30%”, though, that seems to override any mobile styles. I’d like for divs that are styled to appear beside one another on a computer to appear above one another on the phone. Is there a way for that to happen and still specify 30% width for the computer?

    jarektheme

    (@jarektheme)

    8 years, 3 months ago

    Hi @epwolfie,

    I’m not sure this is what you want but you can try to eclose your list element with this css:

    @media (min-width: 768px) {
    .noteworthy li {
        width: 30%;
    }   
}

    Hope that helps.

    Best

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Mobile style broken?’ is closed to new replies.