basic styling for mobile

  • Resolved larchmontdigital

    (@larchmontdigital)


    10 years, 2 months ago

    Hi there,

    Thanks in advance for your help!

    I am trying to accomplish three basic styling tasks for mobile.

    1. Center the site title and description.
    2. Smaller font size for site description so it fits onto one line.
    3. Smaller font size for h3.

    Here is the URL: https://tinyurl.com/kubqtuk

    I am going nuts trying to figure out how to do this! In the older version of the free Make theme, on another website, I simply added the code below to the “Appearance” > “Edit CSS” area in order to style the title/description on mobile:

    @media (max-width: 800px) {
	.site-title {
		font-size: 38px;
		display: block;
		margin: 0 auto;
		max-width: 1080px;
		min-height: 50px;
		padding: 0 20px;
		text-decoration: none;
		width: 100%;
	}

	.site-description {
		font-size: 13px;
		display: block;
		margin: 0 auto;
		max-width: 1080px;
		min-height: 50px;
		padding: 0 20px;
		text-decoration: none;
		width: 100%;
	}
}

    But when I apply the above code to the stylesheet of my current website (URL above), it does absolutely nothing. I’ve tried experimenting with every iteration I can think of in terms of the code that’s already available in the stylesheet, but have had no luck.

    Any assistance or guidance would be greatly appreciated!

    Thank you!

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

    (@larchmontdigital)

    Just wanted to add an update to this thread:

    I figured out how to center both the site title and description by adding this code:

    @media (max-width: 600px) {
	.site-title {
		text-align: center;
	}
	.site-description {
		text-align: center;
	}
}

    However, I still can’t figure out how to change the font sizes (adding something like font-size: 10px, doesn’t work).

    If anyone has any ideas, it would be greatly appreciated.

    Thanks!

    Thread Starter larchmontdigital

    (@larchmontdigital)

    Here’s my solution to decrease the site of the site description:

    @media (max-width: 600px) {
	.site-title {
		text-align: center;
	}
	.site-description {
		text-align: center;
	}
	.site-description, .font-site-tagline {
		font-size: 12px !important;
		font-size: 1.2rem !important;
	}
}

    And here’s my solution for decreasing the size of h3:

    @media (max-width: 600px) {
	h3 {
		font-size: 16px !important;
	}
}
    Anonymous User 9936702

    (@anonymized-9936702)

    Thanks for sharing this with our other users, @ larchmontdigital!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘basic styling for mobile’ is closed to new replies.