Hello. I am having some issues with centering the image of myself. I am using the Nero template, and I want the image of my self, along with the blue circle, to be centered on mobile portrait. However, none of the changes that I’ve been making seem to work. Any help would be greatly appreciated since I am new to Webflow and web dev in general.
The reason you’re having trouble with getting this centered is because technically your element is centered—although you’ve added some margin to the left side so the dot graphic doesn’t overlap your profile photo:
Having a larger image may help here to simulate effect from the template (this would allow the dot pattern to overlap on the upper left of your profile image without getting in the way) but you can always remove the left margin on your image and instead adjust the position of the dot pattern instead.
I recorded a quick video to illustrate some changes and give some insight that may be helpful:
Let me know if you run into issues or have any other questions!
Thank you so much for your help, @mikeyevin. Like I said, I am still really new to web dev, so getting a sense of how the position, margin, etc, effects my layout.
Glad I could help! Also, Webflow just released a great video covering the various position styles that’s definitely worth watching, and if you haven’t done so already, check out the Webflow University for tons more free educational content.
@mikeyevin I have another question. If you look at my layout on desktop, the last word of the “Hi…” paragraph is on its own line. I want to increase the width of the paragraph so that the last word is not on its own line. However, when I try increasing the width, nothing happens. Any idea what’s going on?
This is because your Hero Content element (the parent of your Hero Paragraph element) is contained within a grid cell that prevents it from getting wider than .8 fractional units (FR):
You can get into your grid element by double clicking on it within the Designer window, or clicking the pastel red “Edit Grid” icon in the upper right. Feel free to adjust however you’d like, although it looks like changing that to 1FR fixes the text issue, however keep in mind that as your browser window shrinks the text will wrap onto the next line.
I actually ended up fixing it by giving it a min width rather than a max width. If you don’t mind, could you explain what the difference is between my approach and yourss?
Ah, that’s because in your first example you just told the Hero Paragraph element not to get any wider than that size—if you adjust the min-width, you’re saying that you want it to be at least that size.
I admittedly don’t use grid all that much, most of my designs work fine with flexbox (so I’m much less familiar with it) but it looks like grid cells will grow to fit the width of their content if needed.
In terms of difference, your change will not allow the text to change widths as the window gets smaller, while mine will (since I just made the two columns take up 1FR of the element width).
Thank you so much. I changed the grid, and it worked. As an FYI, I will likely have a lot more questions as I continue working on my website. As far as etiquette for this forum, can I continue asking my questions in this thread, or would it be best if I make a new thread for each question.
It’s best to create new threads for separate questions, but anything related is fine to follow up with. Marking the appropriate reply as the solution let’s others know you’ve been helped and can help inform others with the same (or similar) question.
