@RazaAbbas62
@abimh66
Submitted
First time using Vue to build app, i am not using the API that frontendmentor provide, i use REST Countries (https://restcountries.com/). Sometimes it's taking so long to get the data, what is best practices to get data from API using Vue?
Thank you in advance for your response! :)
@RazaAbbas62
Posted
Hi, it looks good, but without the repo URL, I couldn't check your code.
One suggestion is to handle cases where a country has no information like borders or other details, and display suitable information in those cases. For example, Antarctica doesn't have such detailed information, and the page shows a loading spinner. I had a similar issue with mine but realized that later
Enjoy coding :)
@tloxiu
Submitted
Hi guys and girls! I did another task, but I have one question about improving this project. All I wanted to ask is about the transition of answers to the questions in FAQ. I had a problem with doing that, I didn't know how to do it, where to put properties, etc.
Thank you in advance for your response! :)
@RazaAbbas62
Posted
Hi, @tloxiu in your question p in CSS you can use
transition: height 0.3s linear;
it would make a smooth transition between hiding and showing your answer
I hope it would help
Enjoy coding :)
Marked as helpful
@FranckBigand
Submitted
Hello, Does anyone has a better solution for fixing the footer at the bottom of the page ? What I wanted to achieve was:
@RazaAbbas62
Posted
To achieve the desired behavior of fixing the footer at the bottom of the page and allowing it to be visible when the content is smaller than the screen height or requiring scrolling when the content is larger, you can use a combination of HTML and CSS. Here's an example:
HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Your Page Title</title>
</head>
<body>
<div class="wrapper">
<!-- Your page content goes here -->
<div class="content">
<!-- Your actual content -->
</div>
</div>
<footer>
<!-- Your footer content goes here -->
</footer>
</body>
</html>
CSS styles (styles.css):
body {
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1;
}
footer {
background-color: #f0f0f0;
padding: 10px;
position: sticky;
bottom: 0;
width: 100%;
}
Explanation:
The body element is set to display: flex and flex-direction: column to ensure that the main container (wrapper) takes up the available vertical space.
The wrapper div is given flex: 1 to take up the remaining space and allow the footer to be pushed to the bottom.
The footer is set to position: sticky and bottom: 0 to make it stick to the bottom of the page. It will remain at the bottom even if the content is smaller than the screen height.
The min-height: 100vh on the body ensures that the body takes at least the full height of the viewport.
With this setup, the footer will be fixed at the bottom of the page for small content and will be visible without scrolling. For larger content, you will need to scroll to see the footer. Adjust the styles according to your design preferences.
@rising-dancho
Submitted
What did you find difficult while building the project?
@RazaAbbas62
Posted
You can use
display: flex;
flex-direction: column;
gap: 20px;
It would create the desired effect
Marked as helpful
@Nrotsa
Submitted
Hi, this is my solution to this challenge.
Good challenge to practice the basics of css and html.
I have one question though, is it possible to make this cursor black when hovered over like in the design preview? I know it can be done with svg, but I'm wondering if it's possible in some simple way.
If you have any ideas what I can improve in the code or notice any errors, please let me know.
Feedback is welcome
@RazaAbbas62
Posted
There are two ways to achieve that behavior
/* Regular cursor color */
body {
cursor: default;
}
/* Change cursor color on hover */
body:hover {
cursor: url('path/to/black-cursor.png'), auto;
}
Or if u don't have that black cursor image you can do like
/* Change cursor color on hover to solid black */
body:hover {
cursor: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAf0lEQVR42mP8/wc/AwAB/ABsAAdUoJ9QAAAABJRU5ErkJggg=='), auto;
}
Marked as helpful
@AngwenyiOgata
Submitted
Hello everyone, I completed the challenge Recipe Page I made it responsive on different devices
You can take alook at my code and finished project for suggestions on beterment. I had a challenge with using font assets which were provided in the assets folder any help will be appreciated.
@RazaAbbas62
Posted
To use custom fonts:
Include Font Files:
Define Font Face in CSS:
@font-face {
font-family: 'YourFontName';
src: url('path/fonts/your-font-file.woff2') format('woff2'),
url('path/fonts/your-font-file.woff') format('woff');
}
Replace 'YourFontName' with the desired font family name, and update the file paths based on your project structure.
Apply the Font in CSS:
body {
font-family: 'YourFontName', sans-serif;
}
Use the specified font family in the font-family property. If the custom font is unavailable, the browser will use a generic sans-serif font as a fallback.
I hope it will help.
Happy Coding :)
Marked as helpful
@FidaUllah1
Submitted
Tips and suggestions will be appreciated.
@RazaAbbas62
Posted
Your design looks good but in the footer you can change the color of icons using filter property.
And one more suggestion to have cursor:pointer for the buttons. And have a little animation on hover on buttons.
That's just a suggestion.
Enjoy Coding :)
@RyanAbdaul
Submitted
Hey gangs what's up 😆 I wish you all going great, I completed the challenge, and I hope it's good enough to like you, but I want you to help me do something
Tell me the keyword that helps me to search for how to deal with images perfectly in mobile screens, because I'm satisfied with what is going on there at all.😪 Anyway, I don't want you to tell me how can I do that, how can deal with, no no don't pls.
Just tell me the keyword. all respect and love due to you guys, see you soon ❤🔥
@RazaAbbas62
Posted
Certainly! If you're looking for information on how to optimize or deal with images for mobile screens, a relevant keyword to use in your search could be "responsive images for mobile." This should lead you to resources and guides on best practices for handling images in a way that ensures they display well on various mobile devices.
Another relevant keyword you can use is "mobile-friendly image optimization." This phrase is likely to yield results that cover techniques and tips specifically tailored to make images work seamlessly on mobile screens.
Marked as helpful
@Laxman-Male
Submitted
please tell me if I did any mistake.
@RazaAbbas62
Posted
Your design looks good, but you can also add functionality to these.
It is very simple. You can check out my project click here
HTML, and CSS looks good.
Enjoy coding :)
@joshmichael23
Submitted
Hi guys.
I just have a question regarding images turning blue on the footer. Should I be using filters or are there other options to color on hover? Thanks.
@RazaAbbas62
Posted
Hi,
Yes, you should use filter to make a hover effect on images.
Marked as helpful
@AnishJain34
Submitted
The main stylesheet to appear component in a correct position And image source inside a container
@RazaAbbas62
Posted
Hi, your design looks good but one suggestion is to use max-width: 100% for img instead of width: 100% it will make it responsive.
Enjoy Coding :)
@agshinmammadov
Submitted
Hi, It is my first challenge here. And I just tried to choose the simplest one among the challenges. Please feel free to write your feedback about the solution. I tried to create a CSS variable for easily updating the colours in the future. Divide the card into 3 blocks:
I really appreciate your support and feedback.
@RazaAbbas62
Posted
Hi, your design looks good. To center the card, enclose your whole content including card-container and attribution, into a container div and apply the following to the body.
body{
display: flex;
align-items: center;
justify-content: center;
}
it will center your whole card in the body.
Enjoy Coding :)