I’m pretty new to Webflow and to web design, that’s why I purchased a template to build a site (Justicia.)
Well, I’m having trouble with mobile responsive anything (even with the template – my user error and trying to figure things out) I am unable to get the mobile breakpoint to look presentable (or anything below the base breakpoint, for that matter.) I also am having troubles with when I edit in mobile, an element changes in a LARGER breakpoint (class and styles?)
You can see my images are way out of whack and the grids are offside and sloppy. That dinky black box is the library image I have full size on my base breakpoint. The grids just are off the page and weirdly spacing. I don’t think I get the parent and child grid thing? My end goal is a simple single column with image above it. These grids were preset in the template and I’m just not getting this magic.
How do I make the grids flow, single column with the image above – for mobile – and make sure I don’t mess up larger breakpoints while I’m at it?
And while we’re at it, can you help me with best image sizing for responsiveness?
Hi. My advice for someone who does not have any experience in web design and is using Webflow for the first time with a template would be to start by just swapping out text and images and don’t try to adjust the structure of the project or customize the layout until you are more familiar with Webflow. You can add new sections by copying and pasting existing sections from other parts of the project or by using prebuilt symbols if you need more to work with.
Having said that, there do appear to be a number of display issues happening in the demo page for the template at different screen sizes which I find surprising. For example at the mobile size the text and image placement in the below screenshot don’t seem quite right to me. Also, the spacing between the heading and the button underneath is inconsistent with the spacing in the second screenshot below. This is the “out of the box” template preview page with no modifications made at all.
Another example would be in the below screenshot I would have expected the text to be a little wider and for there to be less white space surrounding this section.
I would expect any display issues at different screen sizes may be resolved by the template creator in future updates however for now I do think some expertise on the part of the person who bought this particular template would be necessary to make some of these adjustments.
There is a section on the template overview page which says the developer is happy to assist if you need any help or find any issues.
I thought using a template would make my life easier, ha. I do appreciate your suggestion about taking in back to basics and building back up. It can’t be as hard as trying to dig into these issues!
I will tinker with things — always a learning experience.
