Issues when building my main-content column for a social media website
Hello guys, sorry to disturb you all; on smaller screen, my create new post button appears in an awfull way (see my codepen). Is it possible to make the sentence appears on a single line or in a more beautiful way?
Also, is it possible to is it possible to only make the feeds part of my website scrollable please (the sidebars remain fixed, only where we create posts is scrollable, the search button etc is also fixed).
Last thing, when I create a post (see the picture uploaded), the image doesn't take the full width of the container, why is that please. (would appreciate if someone can give me some feedback about my post section, the outline is it correct to put it or it makes the post old-fashioned? Are the buttons design correct or they can be improved please)
Sorry for the lots of questions :c
Here is my codepen:
https://codepen.io/Fakeur/pen/YPKKzpp
17 Replies
on smaller screen, my create new post button appears in an awfull way (see my codepen). Is it possible to make the sentence appears on a single line or in a more beautiful way?This is happening because it has limited space and the text has to go somewhere. You probably need to adjust several things, starting with the width of the search input field. Input fields have a default width so you might want to set the width to 100% which should allow it to stretch and contract. You could then add
text-wrap: nowrap; to the button text which would force it to stay on a single line however be aware that this might also make it break outside of it's container.
Combining this with a font-size: clamp() to allow a smaller font size should allow for more space.
You could also consider hiding the icons on smaller screens...
These are just a few ideas, there are of course others, some of which may also require adjusting your HTML.Also, is it possible to is it possible to only make the feeds part of my website scrollable please (the sidebars remain fixed, only where we create posts is scrollable, the search button etc is also fixed).This may well require changes to your HTML. This is a demo that I created some time ago for somebody else and shows just one method as to how this could be achieved. Basically you need to give the side columns a postion of "fixed" or "static" (depending on the rest of the markup) to prevent them from scrolling. However bear in mind the actual content of these columns as that may get cut-off too.
Last thing, when I create a post (see the picture uploaded), the image doesn't take the full width of the container, why is that please.This is a simpler one to fix 😅 You have applied the property
object-fit: contain;.
This means that the image fits within the container but that it also maintains its' aspect ratio, often resulting in either its' height or width being less than its parent element.
If you change this to obejct-fit: cover; it will also retain its' aspect ratio (ie not distort), however it will expand to fill the parent element, possibly resulting it cropping some of the width or height.This is you code with a couple of changes on the search bar.
1.
flex-wrap: nowrap; on the button
2. reduced padding and gap on the button
3. width: 100%; on the search button
4. min-width: 120px; on the button to keep it from getting to small.
5. reduced gap on the parent flex container that holds both the search bar and the new posts button
As you can see, I didn't adjust the font size or hide the button iconfor the input field, I use a flex of 1, is it same as width 100% ?
hmm what do you mean by "bear in mind actual content of these columns as they may get cuff-off too" please. Also, is it possible to make only the main section have the scroll bar? like header doesn't have scroll-bar next to it
No.
flex: 1; means that the element can grow. It is not defining the width.
flex-basis defines the width.Yeah I see, when I change the object-fit property from contain to cover, I obtain something like this, I don't know which is best, using object-fit contain or cover, because I don't want the parent container containing my image to be too big
If your content is longer than the fixed container it will get cut off at the bottom.
ahh ok I see
ah ok, like in each section, if we have paragraphs which is taking larger than the defined width, the container won't expand but rather the text/content will be cut off ?
yeah, not a problem in my case I think, because the container will look something like that, it will always be of a fixed height
cut off at the bottom
Hmm I'm trying to experience that by just adding some random text in the section; for long text I obtain some strange behaviour, like the text are being overlayed... I tries to add an outline to see where each section starts and ends; from what I have noticed, we only should the outline at the bottom or the top, why is that please
I'm not sure what text you are referring to.
Where is this text within your design?
no, I'm using the codepen, like see:
https://codepen.io/Fakeur/pen/jENEqrb
The red outline normally shows where a section ends or starts, the content from 1 section is kind of overlapping with other ones
the outline is added outside of the box container so it is being hidden by the other elements as the main wrapper doesn't have any gap applied.
on the sections you have a fixed
height of 100vh. so when the content does not fit into that, it will cause overflow. make it a min-height of 100vh and it will adjustIf you test with a
border rather than an outline you will see that it is there and that nothing is being cropped.yeah I see, I will revert back, I need to test