I need to change the size of one image at the phone breakpoint, and replace another image (header logo) with something completely different. I understand you can change some things for different device sizes, like fonts and size, but is what I need possible?
On the screenshot, I need a two-line version of my logo at the top. I did change the image at the phone size, but it changed all of them, so I need to be able to stop that from happening.
The dragon head is way too large, and I have a much smaller version, but the same thing happens. Is there a fix for this?
I would duplicate the bloc and place a different image in each bloc, then use visibility, so you see a different image, depending on the user device. To make life simpler I tend to give each bloc a clearly understandable ID like mobile header image.
Basically what i have done with the size is to wrote new css class on different breaks and give them either max width in percentage or in px.
Changing the size for logo you can do the same thing. Just write new class for different breakpoint and add it to the logo. Replacing img in logo is possible if the navbar-header has a bg img. So you can just write css for different breaks. Self changing img on different breaks trough blocs app i think is not possible.
I’ve done quite well with that suggestion. It looks a little odd with double images, one ok and one greyed out, but I’ve sort of learned to see past that. I have ended up with a rather thick menu bar though, there seems to be something behind it in black that I’m not able to get rid of. There are two screenshots here, in preview mode. One is the phone and one a tablet. I’ve put a grey vignette behind the menu bar itself. It’s not bad on the tablet but it looks really odd on the phone. Any suggestions?
I’ll worry about centering the hamburger later.
Oh my aching head and classes! I need to learn rather more about how these work as they do seem to be an answer to so many problems. My problem is I’m seriously allergic to code.
I agree it’s a bit weird seeing the double image with the greyed out area and I wish they would disappear unless you were in the appropriate view.
Sometimes previews in Blocs can be inaccurate and it’s still a work in progress. Try going to View > preview in browser > Safari. When the site is open, try dragging the browser window narrower so you can view how it changes as you shift from desktop to tablet and mobile.
