Aligning the Site Title which is beyond my content on my smart phone.

  • Resolved Douvo

    (@douvo)


    9 years, 8 months ago

    Greetings All,

    My website is InsightBerkeley.org:
    link
    and my theme is Twenty-Eleven and all my plugins are up to date.

    Everything works well except one thing when I use my smartphone. The Site-Title on my phone display goes beyond all the other content. It sticks out on the right side.

    I’ve looked through my child’s theme style.css and the Responsive code, but cannot find the right coding to align it properly.

    If you look at my site on a smart phone you’ll understand what I’m trying to accomplish.

    I would appreciate any help in solving this issue (and also how to do the same thing on the Header which sticks out on my other site as well).

    You techies ROCK!!!!

    Thank you – thank you, for supporting Word Press.

    Douvo

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Douvo

    (@douvo)

    Sorry, I didn’t define the link, which made the whole message be the link.
    Douvo

    [moderator note: link fixed ?? }

    don’t use fixed width in the CSS of a responsive theme, like you did to the site title element:

    h1#site-title {

background: url(https://www.insightberkeley.org/wp-content/uploads/2015/02/Pine-needles-header-white-3.jpg ) no-repeat;

width: 999px;

height: 70px;

}

    also, you are using some fixed margins:

    #site-title {

	margin-left: -78px;

	margin-right: 270px;

	padding: 1.0em 0 0;

}

    try to rewrite the CSS, using only relative widths in %, and possibly use the CSS background-size property https://www.w3schools.com/cssref/css3_pr_background-size.asp

    Thread Starter Douvo

    (@douvo)

    Thanks Alchymyth for the speedy reply,

    It looks as though it’s aligned now. You gave me the courage to dive in.

    It took me a long time to get there, and I’m not exactly sure how I did it which is embarrassing.

    I tried to use the width percentages that you mentioned but when I entered them into the css, the computer version was then misaligned.

    I confess, I’m not a coder which means that I have to guess the meaning of the code and try it out.

    Might you be able to point me to the definitions of each css code for each part like background, title, header, content, feature……etc?
    Or, like an online class for css?

    Thanks again for you help,
    Douvo

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Aligning the Site Title which is beyond my content on my smart phone.’ is closed to new replies.