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!
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.
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.
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.
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
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.
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!
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">.
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
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.
I am struggling with the linear gradient on Instagram account detail. Any suggestions to fix this would be appreciated!
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.
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!
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.
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
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;
};
Can someone help me out with fixing the bug that selects the 10% button when I press enter
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.
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!
It's not an alternate image. It's an overlay using the cyan color and the icon-view svg.
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
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.
"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 :-)
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);