Looking to hire developers?
@nakoyawilson
@yuany2036
Submitted
I ran into a problem with flex box, and that is for the "Annual Plan" part of the website, I couldn't quite get it to align at flex-start, so I had to resort to using -margin to get it to move there, which seems less than ideal. Please let me know if you've spotted the problem, thanks!
@nakoyawilson
Posted
Hey there! I took a look at your code. If by the "Annual Plan" part you're referring specifically to your .centerContent class where you use -85px margin to position it, I think the problem may be line 62 of your style.css file where you use justify-content: space-between which forces that div to the center. You could try removing justify-content: space-between so it defaults to flex-start and then setting a specific margin-left value for .centerContent and margin-left: auto for the Change button.
@taepal467
Submitted
I've noticed that the background images for the header and the computer image does not show in Safari. Any help with that will be greatly appreciated.
@nakoyawilson
Posted
The paths to the images are incorrect which is why they are currently not showing. Try using url(../images/bg-header-mobile.png) and url(../images/image-computer.png); instead.
@imadbg01
Submitted
Hey Frontend Mentor Community !! my first time trying to organize with CUBE CSS methodology feel free to look at my solution any feedback or suggestions are very welcoming , Thanks in advance . am still learning!! :D
@nakoyawilson
Posted
Great job on this challenge. I noticed that the font family declaration for the body (line 28 of your CSS file) is font-family: --ff-sans; instead of font-family: var(--ff-sans); so the intended DM Sans font is not actually being used on the page.
@platypus567
Submitted
How could I have made the h1 justified to the left? Anything I could improve on overall? How could I better use bootstrap to write cleaner code here?
Thanks to all!
@nakoyawilson
Posted
You currently have the "text-center" Bootstrap class on the h1 which center aligns the text. If you remove that class, the default alignment should be justified left. If you need the text center aligned on mobile and aligned to the left on bigger screens you can try adding the "text-xl-start", "text-lg-start", "text-md-start" or "text-sm-start" class to the h1 depending on which breakpoint you want the text aligned to the left. So for example you would have <h1 class="text-xl-start text-center">.
@parvathyvd
Submitted
I couldn't able to change the hover color of the social media icons even though i changed it on hover in the css. I believe may it because the font icon itself? I took them from font-awesome-icons. Please feel free to let me know what's wrong with it
Thanks
@nakoyawilson
Posted
I downloaded your code and after experimenting with it, it seems the color property in this rule is affecting the hover state:
*,
::after,
::before {
...
color: #fff;
}
If you remove it from there and put it in the body for instance, the social media icons will change color on hover.
Marked as helpful
@soyed
Submitted
I am struggling with the linear gradient on Instagram account detail. Any suggestions to fix this would be appreciated!
@nakoyawilson
Posted
I found this article from CSS Tricks helpful for the linear gradient for the Instagram card: Gradient Borders in CSS. Based on the article I don't think it's possible to use linear gradient with the border property so instead I used a pseudo element, made the background of the pseudo element the linear gradient and positioned it.
Marked as helpful
@unexunderscore
Submitted
It's my first time where I need to use API. I watched a youtube video about how to use and get value from api url. So I don't understand it perfectly yet, but it's was good practice for me. I didn't find any other way to get new call from API just the page reaload with onclick method. So if you have any better suggestion then I would gladly to know. Thanks!
@nakoyawilson
Posted
Instead of having location.reload(); in the randomFunction() function, you can include the fetch code directly but you would need to call the function once so that there is data when the page initially loads. Then on each click data will be fetched from the API.
function randomFunction() {
fetch("https://api.adviceslip.com/advice")
.then((data) => data.json())
.then((advice) => generateAdvice(advice));
}
randomFunction();
Also, to maintain separation of concerns, I would suggest removing the onclick="randomFunction() from index.html and adding an event listener to dice from the script.js file.
Marked as helpful
@catherineisonline
Submitted
Hello, Frontend Mentor community! This is my solution to the URL shortening API landing page.
I appreciate all the feedback you left that helped me to improve this project. I fixed the issues I had previously and added new features per your recommendation.
I have done this project a while ago however if you are here and have any feedback, tips, or ideas to share, I will be more than glad to hear them out!
Thanks
@nakoyawilson
Posted
Hey Catherine! I downloaded your code, changed all occurrences of sessionStorage to localStorage and deleted originalHtml = localStorage.getItem("cloneCache"); and parentNode.innerHTML = originalHtml; from the function and the data displayed for me.
window.onload = function () {
let mainClone = shortlyResult.cloneNode(true);
let cloneLinkField = mainClone.querySelector(".inserted-link");
mainClone.classList = "search-result";
parentNode.appendChild(mainClone);
//Retrieving
let cloneLink = localStorage.getItem("cloneLink");
console.log(cloneLink);
//Injecting
console.log(cloneLinkField);
cloneLinkField.innerHTML = cloneLink;
};
@igbokwe-kosi
Submitted
Can someone help me out with fixing the bug that selects the 10% button when I press enter
@nakoyawilson
Posted
I experimented with your code in dev tools and adding type="button" to all five <button class="form__tip-button form__tip--value" value="___"> elements fixed the bug. I think the bug was occurring because the default behaviour of a button inside a form is submit but I'm not certain. Maybe someone with more experience would be able to give a better explanation.
Marked as helpful
@jackiecodes2021
Submitted
I have the Free Version of Frontend Mentor and thus cannot access detailed design notes, but it appears that the image should change on hover but I don't think I was provided the alternate image. Am I misinterpreting the challenge? Any help is much appreciated. Thanks!
@nakoyawilson
Posted
It's not an alternate image. It's an overlay using the cyan color and the icon-view svg.
@Mabchir
Submitted
It would be helpful to understand
The reason why some added values in CSS need "!important" to actually show up.
How to center any element in the screen regardless of the screen/browser/device used
@nakoyawilson
Posted
Adding to @denielden 's comment, in your index.html file you have inline css on line 26 (<div class="card" style="width: 18rem">). If you remove the style="width: 18rem" then you would not need the !important for the width: 320px; for the card in your style.css file.
Marked as helpful
@danM51
Submitted
"Stick to it, it does get better", another project completed and happy to how far I have come... any feedback is always welcome!
oh one more thing, I could not figure out how to get the background images working, I guess my question is <how do you separate the top and bottom background images via Css or is it all applied in html first?>
thank you in advance :-)
@nakoyawilson
Posted
You can add more than one background-image by separating the url sources with a comma and then you can do the same with background position. The code would look like:
body {
background-image: url(./images/bg-top.svg), url(./images/bg-bottom.svg);
background-repeat: no-repeat, no-repeat;
background-position: right top, left bottom;
}
Also in your media query you have the wrong path for your background image. You have background-image: url(/src/images/bg-top.svg); instead of background-image: url(./images/bg-top.svg);
Marked as helpful
@BrythWrites
Submitted
Looking for suggestions on how to get the overlay tint on the image to more closely match the hue of the design.
@nakoyawilson
Posted
You can try using the mix-blend-mode css property to get the overlay to more closely match. For your code I would suggest changing the .img-container:after to .img-container:before or removing the pseudo element completely and adding the background color to the img-container class directly (If you choose to add the background color directly to the .img-container you'll also need to remember to add the opacity). Then add mix-blend-mode: multiply; to the mobile-img and desktop-img classes or create a shared class for both the desktop and mobile images and add the declaration to that.
@Nachofernanddez
Submitted
I not know the page is brokken in netlify.app. If I open the index.html, the page from the challenges is really good, but if I open the page in netlify not show the QR code (the best important). I will try to perform the challenge again later, maybe i can this error. Sorry for my English, i am from Argentine.
@nakoyawilson
Posted
The path to your image source is incorrect in your HTML. It should be <img src="./image-qr-code.png" alt=""> as your image on github is not in an images folder.
@cloudyay
Submitted
I am a newbie to Web Development and this is my first real Webpage, honestly took me several hours to get it right. Any feedback or improvement ideas are welcome.
@nakoyawilson
Posted
Good job on your first project. When you submit a solution I would recommend checking the report to see if any accessibility or HTML issues were detected and reading the explanations if there are any to try to see if you can fix the issues. When you address the issues you can regenerate the report to ensure the issues were fixed.
@fraserwat
Submitted
Had this lying around half-finished for a while but been learning state management (VueX) recently so seemed like the perfect opportunity to use that for the user data handling. Getting it working asynchronously was hard!!
Any feedback v much appreciated!
@nakoyawilson
Posted
Hey. Nice job on this project. Not sure if you forgot to add it or it was intentionally left out, but there's no error message when the user inputs an incorrect/non-existent username.
@mattreee
Submitted
My biggest question for this project is why the property "justify-self" wasn't responding in the media query. My guess is, since the the element I was trying to move was an image, the rules could change (maybe?). Which is weird, because I expent a little bit looking at documentations and blogs I couldn't find anything about it.
Result is, if you look at the social links in the footer in mobile mode, they won't be centered. Also, the intro part was a bit tricky. I'm still not sure how to move one box over the other without setting fixed values. Maybe I didn't put enough thought in it.
Any help is welcome! Ps.: I know it looks ugly while resizing.
@nakoyawilson
Posted
I took a look at your code and I'm not familiar with Sass but I noticed in your main.css file for your media query you have __icons { ... } instead of .footer__icons {... } and I downloaded your code and ran it using .footer__icons {... } and that centered the icons for me.
Marked as helpful
@Scott-Wilder
Submitted
I felt using grid, width, and margin to get the desktop view was a bit hacky, please let me know if you found a better solution for the desktop layout, thanks!
@nakoyawilson
Posted
Instead of doing a 3 column grid and specifying widths, I would suggest doing a 4 column grid and using span 2 for the wider boxes. I experimented with your code and used this to achieve the layout.
.flex-container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
max-width: 70rem;
gap: 10px;
align-items: stretch;
}
.boxes {
margin: 0;
}
.box-1 {
grid-column: span 2;
}
.box-4 {
grid-column: span 2;
}
.box-5 {
grid-column: 4 / 5;
grid-row: 1 / 3;
}
Marked as helpful
@azyepes29
Submitted
I didnt know how to change the color of the picture. Can somebody give me a clue? Thanks in advance! Peace out :)
@nakoyawilson
Posted
You can try using the mix-blend-mode css property to add the accent color to the image. I would suggest wrapping the picture in a div and adding the violet color as a background and then adding mix-blend-mode and opacity to your picture_img class. I tried adding the violet color as a background to your picture class and it worked for desktop but gave a weird effect on mobile which is why I suggested wrapping the picture in a div but you can experiment with it.
.wrapper_div {
background-color: var(--softviolet);
}
.picture_img {
...
mix-blend-mode: multiply;
opacity: 0.75;
border-radius: 10px 10px 0 0;
}
@pqhung3007
Submitted
Although I have no noticeable difficulty completing this challenge but there's a part I find confusing. The number of "Youtube subcribers" in the first container is supposed to be red. I tried .card-footer p:not(:last-child) {color: var(--lime-green);} to set the color of the three <p> except for the last one. I'm surprising it didn't work so I had to manually add inline style to the last <p>. If you have any ideas or suggestions, please let me know!
Other than that I'm quite satisfied with the result. This is also the first time I work with dark/light mode switching and it's very interesting.
@nakoyawilson
Posted
You can try adding your youtube class to the selector to specifically target the youtube paragraph instead of using inline styling:
.youtube .card-footer p {
color: var(--bright-red);
}
@Jukiyoomi
Submitted
I wonder why there is always a gap between our solution and the design in relation to the positioning. and someone can explain this line to me : Page should contain a level-one heading ?
@nakoyawilson
Posted
The level-one heading just means your page should have an h1. For your code, since you didn't use the logo svg, instead of:
<p class="title">splitter</p>
you can change it to:
<h1 class="title">splitter</h1>
@shangum
Submitted
Note: This is a resubmission with my live site url now moved to Vercel (thank you @Remus432) .. Hello All, This is my first Frontend Mentor React project. I took an online course that introduced me to React some months back but haven't had a chance to try creating and deploying a project in the wild yet.
For this project I implemented the design using only two functional components. If you see any improvements that can be made feel free to mention them.
Since this project was mainly used for me to get my feet wet using React I only have one explicit question. Does anyone have any resources on the best way to deploy a React app to Github pages?
Usually I use the web interface as outlined at this web page: https://medium.com/frontend-mentor/a-complete-guide-to-submitting-solutions-on-frontend-mentor-ac6384162248
I had some trouble getting my React app deployed to Github Pages and ended up getting it working using a convoluted method that I'm sure can be improved upon.
Here are two other web pages that I initially used to guide my code deployment: https://dev.to/yuribenjamin/how-to-deploy-react-app-in-github-pages-2a1f
https://www.pluralsight.com/guides/deploying-react-on-github-pages
Moving forward I want to get more comfortable with deploying React code to Github Pages but in this case I figured done is better than perfect for my first project.
Thanks to all who have helped so far. And Thanks
@nakoyawilson
Posted
Hey! Great job on this project. I recently started learning React also and I didn't even know that you could deploy React apps with Github pages. I just googled and found these instructions from Create React App that also include some notes and troubleshooting. I'm not sure if it provides any extra info than the sources you used already but hopefully it can be helpful.
Marked as helpful
@suatcg
Submitted
I've been trying to put the left side to .author div element but I could not via flex-box. I supposed it has to work but it is centered on the card component.
Meanwhile, I didn't add to media querries out of it works responsively correct likewise I expected. I believe works due to accommodating the center of the body. If you look at it. I would be appreciated. then you could give your advice.
The last thing I would like to say, I will add a hover state later. I haven't done it yet.
@nakoyawilson
Posted
If you add align-self: flex-start to the .author div the content should align to the left.
.author {
display: flex;
align-items: center;
align-self: flex-start;
}
Marked as helpful
@Bopchy
Submitted
Hello!
How can I get the shaped "wave" background to look as tight/close as it does on the design?
In my solution I added it as a background image and specified background-size: 100% 22em; so that it covers the full width of the screen. This stretches out the shape though
@nakoyawilson
Posted
Hey Ruth!
I looked at your CSS and it looks like you don't utilise the pattern-background-desktop.svg for your background on larger screensizes. Try changing the background image url to utilise the desktop background in your media query to see if that solves your problem.
Marked as helpful
