Smix
KPCKevin Powell - Community
âĸCreated by Jojoba on 9/16/2024 in #front-end
Responsive layout - grid with image
If I understood correctly, you need to add this to css:
.image img{
object-fit:cover;
}
or remove the image from html and add it as a cover in the css like this:
.image{
background-image:url(https://picsum.photos/1920/1080);
background-size:cover;
background-position:center center;
}
depends on the final result you wanna achieve.
3 replies
KPCKevin Powell - Community
âĸCreated by Yung PP on 9/17/2024 in #front-end
Anyone have an idea for responsiveness for this?
Put it on code pen so we can see and write solutions.
2 replies
KPCKevin Powell - Community
âĸCreated by Smix on 9/1/2024 in #back-end
ACF pro Wordpress
Dunno why I was confused in the first place. Maybe there is better way to do it, but if it works, don't touch it đ
11 replies
KPCKevin Powell - Community
âĸCreated by Smix on 9/1/2024 in #back-end
ACF pro Wordpress
In ACF I created one group with subfield, set the rules to display on post and page template except the homepage, added the same php code in all templates and it works independently as I wanted.
11 replies
KPCKevin Powell - Community
âĸCreated by Smix on 9/1/2024 in #back-end
ACF pro Wordpress
Tnx guys, I managed it. Works fine.
11 replies
KPCKevin Powell - Community
âĸCreated by elvivace on 9/1/2024 in #front-end
How do you manage elements on the edge of the screen / out of the grid as screen scale up
In the design the splash sits on the edge of the content, not the edge of the screen, so I would keep it that way as long as possible. Would adjust the size of the image tho when necessary.
7 replies
KPCKevin Powell - Community
âĸCreated by Smix on 9/1/2024 in #back-end
ACF pro Wordpress
I tried that, no luck.
11 replies
KPCKevin Powell - Community
âĸCreated by Stroudy on 9/1/2024 in #front-end
Problem with Imgage not filling in space is caused by padding
can you put this on code pen? images also.
9 replies
KPCKevin Powell - Community
âĸCreated by elvivace on 9/1/2024 in #front-end
How do you manage elements on the edge of the screen / out of the grid as screen scale up
For eg. the section that says Discover the best coffe, I would add a padding bottom, and then placed the image there, so it doesn't overlap with the rest of the content.
7 replies
KPCKevin Powell - Community
âĸCreated by elvivace on 9/1/2024 in #front-end
How do you manage elements on the edge of the screen / out of the grid as screen scale up
I would position the coffee splash image absolute to one of the section or just use ::before or ::after for the same purpose. As for the coffee elements on the body, the designer has to know that at some point that these will not be visible on smaller screens since the container will be 100% width. Unless you wanna keep container smaller than the body itself through all screens, but that is not advisable. Designer must provide mobile design also, and if it sucks (often it does since they don't know much about the layout of the html), collaborate with him/her that some things are just not meant for smaller screens.
7 replies
KPCKevin Powell - Community
âĸCreated by luca on 6/11/2024 in #ui-ux
can i get some feedback on my mobile navbar?
That's something else. Web accessibility option (if I understood correctly) most of the time is hidden on mobile since phones have that already built in, also it is not used so often like menu button is. Priorities.
24 replies
KPCKevin Powell - Community
âĸCreated by Lonnie on 8/10/2024 in #front-end
Can position:relative and position:fixed be used together?
position fixed is position relative to the screen,
position relative is position relative to its static position,
position absolute is position relative to its parent which isn't static.
For detailed help, provide the code since like Alex said, its not really clear what you want to achieve.
15 replies
KPCKevin Powell - Community
âĸCreated by Pi, a future fluent jp speaker on 7/22/2024 in #front-end
width descriptors
images should have a responsive feature which we gain by adding max-width:100%, height:auto;
6 replies
KPCKevin Powell - Community
âĸCreated by Code-S â on 7/21/2024 in #front-end
Responsive
Actually this is not really a good way to go about it. Use a grid and try to choose only one value either width or a height, set the other one as auto. Also, positioning everything absolute is not a good idea, its harder to maintain the flow for responsive. Try adding it to code pen so we can see better what is actually going on.
95 replies
KPCKevin Powell - Community
âĸCreated by å
ąįŖä¸ģįžŠãŽãäē㤠on 7/21/2024 in #front-end
What image sizes would you choose for a responsive hero image?
depends,. its always a good idea to choose one ratio and thus you will have sizes accordingly.
4 replies
KPCKevin Powell - Community
âĸCreated by luca on 6/11/2024 in #ui-ux
can i get some feedback on my mobile navbar?
they are minority. design should always aim for the majority.
24 replies
KPCKevin Powell - Community
âĸCreated by luca on 6/11/2024 in #ui-ux
can i get some feedback on my mobile navbar?
Put the hamburger to the right, make your nav__list 100% height, disable body scroll.
24 replies
KPCKevin Powell - Community
âĸCreated by Jonah on 1/29/2024 in #front-end
How to make the image clickable?
18 replies
KPCKevin Powell - Community
âĸCreated by Jonah on 1/29/2024 in #front-end
How to make the image clickable?
Also I suggest to put the answer in the same div with the question.
18 replies
KPCKevin Powell - Community
âĸCreated by Jonah on 1/29/2024 in #front-end
How to make the image clickable?
There are few ways to do that.
The easiest way is to create a on click (on the image) toggle class and than use the css properties to show or hide the content. Be sure to use eventListener method.
Just toggle class "show" to class .hidden, the rest is CSS decalaring
.hidden{display:none;}
.hidden.show{display:block}
18 replies