bsdesign file to work on, but then that’s kinda how I make my living (if you get my drift.) Also, your page is full of inline styles, which makes diagnosing things considerably more difficult, because there’s no simple way to disable them with the Chrome inspection tool. To really identify the source and solutions to your issues, I would probably need to have the actual. I see all kinds of problems when you go below 300px in width. I can’t really imagine how one would test a mobile layout on a folding phone without having the phone to experiment with, but I would assume that when it’s unfolded, the site should display in the browser the same way it displays on a standard phone (unless they’re using a customized browser to accommodate the folding ability, in which case all bets are off.) The second thing that jumps out at me is the margin-bottom: -225px on the column containing your slider (which I presume your doing to accommodate the nature of the Bootstrap Carousel to adjust its height proportionately to the width of the image.) Negative margin is rarely a good solution to a layout problem. You should not ever need to set fixed heights on sections in a responsive website. Note: I use Chrome debugger (F12 / Ctrl+Shift+M) to show the different viewports.īy looking at the site using Chrome’s inspection tool, the first things I see that strike me as problematic are 1) You’re assigning a fixed height to the section with the ID #android. Section 3 background is not fully vh - I can by adding pixels to size height, but it will affect other lower viewpoints on XL breakpoint with a bigger empty space, which I do not want. This happens for Section 2 on Surface Duo resolution aswell.ģ. This works.īut when viewing at iPhone 6/7/8 Plus (414x736) or Surface Duo (540x720) the paragraph ![]() I want the paragraph of Section 1, to show below the carousel, when the viewort gets so small in width, that it breaks the 2 columns from next to eachother to below. ![]() I want the top image image_holder.png to shrink when the viewport size gets so small in height, that the bottom-div still has room to show on the bottom of that section which is controlled by 100vh.Īt the moment, the image keeps its size, and not shrinking, which makes the bottom-div ‘fall off’ when the viewport of iPhone 5/SE (320x568) is used for example.Īnd therefor overlapping the content of Section 1. Boot strap elements adjust such as img-fluid but my custom font don't si i have to use breakpoints for that. Getting break points was more a bit test, tweak, test. That means that using browser developer function and shrinking page evokes, the "burger" menu for drop down even when i am off line. The approach is use with bootstrap is that with a url it can be frustrating if your internet is not great, so i have downloaded all js files for bootstrap and i have bootstrap as scss so i have everything in dirs in public so don't have to rely on internet. Flexbox isn't that bad, and now we have layouts you only have to create maybe a couple to do everything Its probably just quicker to get a couple of concepts in hand and apply them. My general perspective is this, lets use bricks and walls for a metaphor i can learn about being a bricklayer and do it bit by bit, or learn to use a robot who i control to the do the bricklaying. had a quick look at ping, not quite keen. You can create a whole page, where there is a place mark for the content bit that changes. if you ever heard of twig or blade, not quite the same but i can see similar concepts in layouts. But, so is bootstrap relative to what I actually use. I felt the old css was extremely bloated. The goal was to reduce the amount of time needed to get all page data to the browser. I got committed to Bootstrap when converting from old css before seeing info about flexbox. My thought was if I could get something which creates the html I need using test data, then I can move that over into the codeigniter code and programmatically insert data. Converting the old ways to new html and css is a moderately painful process and coding the markup by hand requires a fair amount of testing. The actual content is created in a couple of different ways. ![]() The only truly static items are the header and footer. My goal is to construct the framework html/css because the content is added through Codeigniter. You cannot try Bootstrap Studio and the online demo does not work for me. But still spending 12 to 15 hours a day reorganzing the site and adding new ways of doing things.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |