Unable to get the mobile pics in a flex div block to behave like the other pics just above it. This is on the “HOME” page. The 2 pics are the one of a woman with the caption “escape” and the image of a to go cup on the grass.
Originally they had the same class but that didn’t work so I changed the class and tried to set it to the same settings as the class had before I changed the class (I didn’t “rename” the class)
Pics are sized to be W4000 X H3000
Also, a bit off topic but some pics when replaced don’t show up immediately. When this happens I click on settings or HiDPi and the new image appears. I work around it
Thank you all in advance for the help
Thanks for the heads up Garymichael1313 The problem is solved for now. Could use some advice. I am having some issues with sizing images. As you can see they are close but off just enough to make my titles look very unprofessional. Tried styling the titles too but any styling also affected images. I am looking to see how the flex layouts might differ. If you find it first please let me know
Also, Is this intro picture a little too much? https://preview.webflow.com/preview/one-of-lifes-perks?preview=d0ce20df2c03bb9bb1966b7a2e6be558
Yep, I see your images are just slightly off. A few tips.
I would remove the body background image and just use no bg color, or a slight color tint, I use #FAFBFD on most sites with bg color. It’s light grey but subtle.
Remove the navigation bg image, you definitely won’t need that. Use a color that matches the company brand.
Each section create a flow for the user:
Section 1: Navigation
Section 2: Hero image or Slider, this should tell the user “Who we are”. And text to say “Come here, get this”
Section 3: Start selling or explaining, “What we do, Our Features, What you can expect”
Section 4: Imagery with boxed image sections, “Have breakfast, Friends, Escape, etc” if these are images, they need to take the user to a purchase page or product page.
Try not to use images to speak to the user, instead focus on content writing. They don’t know you so they need to read about your; Process, People, How, Why Your Better.
You’ve got most of the idea down, there’s just a little break in the flow with too much imagery. Make an adjustment to this type of layout, in a sequential process:
Hero section/slider - Use div w/ background image, instead of image inside, because you can’t add text over an image element. This is where you add over the bg image -
Ah, That First Cup
Start your morning with us.
The perfect environment for meeting friends, family in a relaxed setting.
Now that big image makes sense.
Second section after hero: Text content paragraph, explain who you are and your specialty.
Then give your image grid (clickable): With titles
Maybe testimonials next
Then, add awards, news articles, any critic reviews (grid layout with hover effects)
Footer
But really space everything out: Add at least 400 - 500 px between each section. Here’s client site I’m about finished with, it’ll give you an idea of spacing flow: christisimmons.com
Hope this can help ya out. Im available if you need help.
