Latest solutions
Article Preview Solution
Submitted about 1 month agoMedia querying, and fixing the button after 2nd click from reverting to a transparent background color.
Hopeful duplicate of Product Preview Card Component, HTML/CSS. Flexy
Submitted 3 months agoI'm not entirely sure where I would need help with. At the moment the only thing that seems to need adjusting is the sizing of the section when the width grows and shrinks and the left side "container" contents.
Responsive and Mobilized Recipe Page with Instructions.
Submitted 4 months agoWondering if anyone can identify where I'm suffering to readjust size for the large container that is acting as the actual paper container for the rest of the containing divs, at least for desktop anyway, I belie ve media queries will allow me to adjust for mobile
Responsive and Mobilized Profile link page with CSS & HTML
Submitted 5 months agoAccessibility for transition between mobile and desktop views, I always suffer trying to query transition them, so any help would be appreciated though at times I know it is better I just sit and tamper with the code
Blog Preview Main, CSS/HTML, flex, root & var...
Submitted 5 months agoMaking my hyperlink actually change on hover, and wondering if spacing adjustment is necessary within the container.
QR Code Component, Flexbox, inherent device scaling, Root Use
Submitted 5 months agoSpecifically, not really, but any tips and tricks for both efficiency and learning for alignment/sizing/flexing would be greatly appreciated.
Latest comments
- @yrjeb@TradesmanBOB
At first glance, looks like the text is slightly smaller than the design. going to the live preview the button is showing the popup on hover, not click, one must press the button to see the popup.
Marked as helpful - @FlightReacts11What are you most proud of, and what would you do differently next time?
idk
What challenges did you encounter, and how did you overcome them?media query to hide image on desktop size for when it has to change to mobile
What specific areas of your project would you like help with?none
@TradesmanBOBLooks pretty darn close, only slight differences is very slight sizing difference for section size and the spacing on the right hand div.
- @CleberWSL@TradesmanBOB
I personally commented out the attribution, but unsure if its necessary. for actual content I would say add like 20-40 pixels of margin top, so the container sits dead center or very close to.
- P@RubenbardWhat are you most proud of, and what would you do differently next time?
i'm still lokking for a standardized way to begin a project, instead of just throw code at the screen. So i began with structuring my html, and yes i don't know why i have a card id in it. ;) And then started to css from the top. Beginning with the color and font variables.
@TradesmanBOBWhen I started these projects as well, I had a lack of standardizing pages like this, so I just started doing a ton of div elements and adding border css with high contrast (easy to differentiate colors), like red on a light or black background as outliners starting with getting variables for colors, setting fonts, and then building html content first with containers, divs, lists and etc. Personally, I think of html for this at least as a desk, body being the desk, a section element or div element as a paper upon it, then with each further div creates basically a box in which later (in css) I can slap on some paint (CSS how it looks), it all depends on how you Div elements and which elements override the css variables or selectors of elements within them
Marked as helpful - @karthik-babu-56@TradesmanBOB
First, the "card" class does not match that of the design, it being the largest container should. Second, you are missing two elements being: Learning (which may be put in another container), and the Author Greg Hooper and the profile image for Greg. Third you have made bolt the post description text when it is unnecessary.
- @alan61503@TradesmanBOB
- your title h1 is not supposed to be page center, it also looks like the color is a lighter version of the deep grey in the design
- Preparation heading is colored gold not purple { hsl(332, 51%, 32%)} and is centered.
- the bullets within Preparation are not colored purple, and thus are a tad difficult to spot, as are the bullets within Preparation weren't colored a version of gold, same for the numbered list not being colored gold .class li::marker {color: hsl(14, 45%, 36%), (or) hsl(332, 51%, 32%);} the first hsl being gold, then purple
- the word nutrition are bold when it should be the actual measurements, and the measurements are also a lighter tan than the gold (the same gold as the bullets should be and the headings)