Essentially, 480px across will cover most phones * and 980px across is the point between landscape(1024) iPad and portrait(768). The reason for using the seemingly arbitrary breakpoints is because they are sort of a ‘catch-all’ size. I understand Elegant Theme’s choice on this to an extent. So if you adjust everything to look “perfect” on those views, 99% of the time, it’s gonna break. The common misconception is that thinking the mobile view and tablet view are actual (common, real-life) mobile and tablet screen sizes. So naturally, the settings revolve around these breakpoints. This isn’t actually a problem, it’s a misconception.ĭivi has two major breakpoints.
#Examples of deepfocus elegant theme code
To learn more about CSS, check out this comprehensive course that covers everything about using CSS with Divi! (use coupon code "getcoursewith5off" for 5% off) Start learning proper CSS for Divi Years of mobile responsive web coding experience is in that course. It’s specifically made to solve 99% of your mobile responsive problems with Divi, and even add extra value to your builds. If you want to really learn all there is about flexbox and media queries, this course is for you. This is a media all and (max-width: 479px) No excuses.īUT, since we’re just on the topic of solving responsive problems, let’s just keep going for now. Regardless of what your role is, or the job title you consider yourself as, if YOU are the person putting together the website, you need to know CSS. Now that the worst idea / “solution” / “method” has been addressed, let’s move on. We should be trying to become better at what we do, and not get upset or defensive about a lazy method just because we don’t want to learn. If I offended you and your go-to method, please leave a comment below so I can gleefully delete it.
professionally) then you should be using media queries, and not the laziest amateurish way possible. If you’re offering web development services for money (ie. Technically it sort of seems like it works, but it’s not being done properly at all, and they’re gonna have to learn to do it right sooner or later if they want to keep pursuing that field. Seeing this being done, advised, or championed is like watching a child performing magic and telling people to close their eyes while they make something disappear. There’s no way of doing anything special for ipads (1024px), and for smaller laptops (1280-1440px). You won’t get any fine tuningĪll you get are two breakpoints: 980px, and 480px. Everything is either there or not, and things just jump around.
It’s even worse when there are multiple images involved. Things just popup or disappear, and it’s very clunky in how it displays when you’re resizing the browser. Imagine if you had inherited a site like that. Imagine having to edit three sections/rows/modules every time you had to change one thing. (Also, who knows what’ll happen to search algorithms later down the line?) D. It’s still duplicate content, and it’s still just the worst way to do it. I know some people might be like “hey, I rank well with this method” and I don’t care. Also check out the replies on this page or read the comments on this page This is really sad since you put in the effort because it’s important content, but it ends up hurting your SEO. We don’t get to see it, because we’re humans, but bots do.īots aren’t savvy with CSS and its stylings, so for them, it’ll just look like duplicate content, which could easily fall into either boilerplate content or keyword stuffing, neither of which is desirable in terms of SEO. You get duplicate content on the page (affecting seo) Just text only, I am not happy with, but still it doesn’t cause as much loading problems as much as doing this “tip/trick/hack/buffoonery” with images. This is unnecessarily adding stuff to the load. But if there are different sections that have the same thing like: This is because those # links are actually added in the id, like this:Īnd the browser scrolls to that section. That’s because anchor links (links that look like this) You will have problems with adding # links. Here are some reasons why that is a very bad idea. Let’s get this misguided “method” out of the way. This post isn’t a single “tutorial” per se, but more like a summary of everything you need, and I’ll be linking to some useful tutorials that’ll provide the solutions… so more like a tutorial collection, like I did here. (Web meaning Facebook groups.) Buckle up, this one’s (long and) comprehensive After years of making highly responsive Divi websites, here’s a rundown of my solutions to the most common responsiveness questions concerning Divi I’ve seen on the web.
0 kommentar(er)
