Hello everyone. Need some advice as to the best way to fix this issue.
I had a review of my portfolio recently. The person doing it noticed that the text under my social media section was pushed slightly to the left on her screen.
I checked in Browserstack with the following browsers at 1920 x 1280 resolution:
Firefox v 104 (Windows 10, Windows 11)
Chrome v 105 (Windows 10, Windows 11, macOS Monterrey)
Edge v 105 (Windows 11, macOS Monterrey)
When looking with those I saw that for some reason at the higher resolutions the following line (“If you like what you see and want to work together, get in touch!”) would shift to the left. I think I’ve fixed by increasing the padding on that line to 110px but it’s not the greatest solution imo. What would be a better way to fix this issue?
I took a look and found that there were some odd max width (Max W) settings on the paragraph element in question for the higher breakpoints (higher resolutions than the Base breakpoint). I reset the max width settings to the default and it seems to have done the trick. Check out this video to see exactly what I did.
As for what to do in the future, I would use Flexbox on the parent element. It gives you more control over the alignment of the child elements within the parent element.
Here’s a link to the Webflow University webpage (with video tutorial) on Flexbox.
Thank you Tyler. I tried your suggestion and it worked. I’m wondering why the max width was causing the text to shift at higher resolutions. I am using Flexbox for parts of that site but I’m wondering it it would help for the social media part.
Many thanks, Tyler. The fact that I was able to edit the text that was posted on the home page of the Quackity store as a result of your aid with this guide makes me glad.
