- This topic is empty.
December 8, 2018 at 12:18 pm #280001MusickyParticipant
I’m relatively new to HTML/CSS, and am currently designing a web-page for my course.
The issue is coming from the second row of images and their subsequent descriptions on the homepage. I’ve floated all of the elements to the left, but I’m trying to position the second row to be more central to the first row of images.
The web-page is currently working as a responsive page should, however, if I remove the float and replace it with display: inline-block, for example, and position them to where I want them using other properties, they won’t display as I want them as the web-page gets smaller.
If anyone could give me any idea as to fix this problem, I’d be very grateful.
Thank you in advance for any help/suggestions.
Link to codepen:
https://codepen.io/Musicky/pen/OrJLQpDecember 8, 2018 at 5:19 pm #280004December 8, 2018 at 5:29 pm #280005BeverleyhParticipant
> if I remove the float and replace it with display: inline-block, for example, and position them to where I want them using other properties, they won’t display as I want them as the web-page gets smaller.
Which is how exactly? What’s the undesirable behaviour that you want to fix?
But before you change the layout, you might want to rethink your goal… Centering elements across the width of a full-screen layout can be perceived as amateurish, because it “breaks” the comfortable/satisfying grid that is usually desirable in layout design. Viewers can find it unpredictable and jarring when the flow changes half way through like that (unless it’s for a heading or something that’s supposed to separate and draw attention). It’s natural to cognitively group like-with-like (patterns are good, consistency is good, the human brain doesn’t like the unexpected), so throwing similar elements out of line like that can negatively impact the viewer’s experience… and unfortunately, that reflects badly on you, the designer. I actually think everything looks very nice the way it already is.
- The forum ‘Design’ is closed to new topics and replies.