Feedback: HTML, CSS & Responsive Design Tutorial

This topic contains 5 replies, has 4 voices, and was last updated by  Sebastian 2 years, 3 months ago.

Author Posts

Sebastian

We recently released a tutorial on the basics of HTML, CSS and Responsive design. This will be a work in progress. Please tell us how we can improve the tutorial by leaving comments on this thread.

You can also request support here if it directly relates to the responsive tutorial.

Thanks a lot!
Sebastian


dhrose

I’ve been going through the tutorial and although I’ve been customizing themes and frameworks for a number of years it’s still good refresher knowledge. I purchased microthemer awhile back and haven’t used it that much as I have way too many themes/frameworks to mess around with. But one question I had after running through the tutorials is: When you name a selector in microthemer is that overwriting an existing style? Or is it creating a new one… I’ve always used the “inspect” method and a child theme to write styles etc. But I’m a little confused about what microthemer actually does. Thanks! Do a more advanced tutorial which shows redoing a standard theme with microthemer… that would be useful for someone like me. Cheers!


AJFrane

This is perfect for me. I have muddled my way through this for too long, and made our site look pretty much exactly how we wanted it… but it’s involved a lot of trial and error. I understand rudimentary HTML, but virtually nothing of CSS.

Just what I’ve been looking for! Thanks!


Sebastian

@ajfrane – thank you for the kind feedback!

@dhrose

“When you name a selector in microthemer is that overwriting an existing style? Or is it creating a new one…”

At the exact point of naming a new selector and clicking the CREATE SELECTOR button, Microthemer just creates an empty selector. So technically no styles have been overridden. But when you apply your first style to a new selector e.g. setting font-size to 20px, Microthemer updates its stylesheet (/wp-content/micro-themes/active-styles.css) with both the selector and the new style:

#your-new-selector {
   font-size:20px;
}

So you are creating a new selector and style in active-styles.css. This doesn’t delete any other styles in your theme or 3rd party plugins, but it may override other styles in terms of CSS specificity. Microthemer overrides CSS styles in a non-destructive way thanks to the rules of CSS specificity, which is also discussed in the tutorial: https://themeover.com/responsive-media-queries/#specificity

I hope that helps answer your question. And thank your for the additional tutorial suggestion.

Cheers,
Sebastian


vm0572

Hello Sebastian,
I followed your tutorial and it worked great. However I can’t seem to get the same responsiveness on this site http://www.chungssandwichbar.com. On mobile, the fullwidth picture is cut on both sides. Am I not targeting the correct selectors? Or is the picture just too large? I want the sandwich picture to be fluid and shrink in size.
Your feedback would be greatly appreciated. Thank you.


Sebastian

Hey,

Try setting the background-size option to contain. Which is an option to the right of the background image field.

Cheers,
Sebastian

You must login or register to reply to this topic.