The page i've made so far can be viewed here.
And the HTML here: http://jsbin.com/fujozekoqama/1/edit?html
Notice what happens when you make the browser window smaller.
Why does the image lose alignment to the menu if they are in the same container?
Here are pictures of what I'm seeing:
aligned: http://i.imgur.com/aZUkVIR.png
unaligned: http://i.imgur.com/o0Mdg4J.png
You need to remove this from your styles, because it's affecting the responsiveness of the layout:
.container .navbar-default {
min-width:640px;
width:640px;
}
and add the .img-responsive class to your image, like this:
<img class="logo img-responsive" src="http://placehold.it/350x75">
and then close the first .container div, which is open
with these tiny changes, it will work just as you want, and your layout will be responsive (which is the whole idea after Bootstrap after all).
If you need some min-width, add it in the .container class, not the inner elements. For this purpose, it's always a good idea to add an additional class to re-usable classes, for example <div class="container myMinWidth"> so you can target the .myMinWidth class without affecting the .container class, which you will need to use everywhere in Bootstrap.
And finally, unless you really need it (which you probably don't), avoid using fixed sizes in responsive layouts, if needed, try to use percentages, but make sure to check Bootstrap docs, because there are lots of built-in classes like img-responsive that will adjust your images like in your present situation
Related
I have two buttons.
They have exactly the same classes.
But one is inexplicably wider than the other.
All other buttons on the page render full width like the "Declaim" button. There's nothing to the right of these buttons. I have tried refreshing my browser cache and Laravel's view cache. The classes you see are from Tailwind and Bulma and haven't been touched by me other than:
.button:active {
position:relative;
top:2px;
}
What could be happening here?
Update:
In response to Phix and Saqib, yes, it did have a grandparent with flex but I
Deleted all custom css in app.scss
Created a demo component with nothing but a container with a div of class "buttons"
Rendered it alone directly inside main
And incredibly I still have the same problem. Without the div of class "buttons", the buttons are the same size. But I can't work out why "buttons" would be doing this.
Update 2
This is what happens when I set a fixed width:
Someone probably knows exactly what is wrong looking at that? I unfortunately don't.
I was told not to mark my own question as solved so I am writing the solution I found here.
The problem was mixing Tailwind and Bulma. The solution was using is-fullwidth instead of w-full. Bulma applied a margin that checked for is-fullwidth but obviously had no idea about w-full.
Modifying the "buttons" or "button" classes wasn't working but I know now that I needed to use .buttons:not(:last-child) {}. However, switching to is-fullwidth makes much more sense.
If both buttons have same padding, it might just be the length of the text of the button. "Declaim" is longer than "Claim".
Try adding a fixed width and box-sizing: border-box; to include the padding in the width.
Also the default position of a is inline-block. Try making setting it to block.
I have 3 images within a table, which is the only way I could figure out how to get them adjacent to each other. The problem I am having is that while on the screen I am using, they look like how I want them to be without a scroll bar at the bottom, but on other size screens they force the whole page to extend and therefor requiring scrolling to see the whole width of the page. How can I make the appearance responsive so that the images remain the same size relative to everything else?
Screenshot attached
There are a couple of good ways to make webpages like this responsive to screen size. I'll describe two of them, but again, there are many more:
Making the table width match the page width
An external style library, like Bootstrap
Making the Table Width Match the Page Width
First, you need to make sure that the page itself has the style position: relative on it - so that any of its children (including your table) can be positioned or sized relative to it. There are a couple ways to do this with css, but if you're using classes, you can just assign all of the standard high-level elements in html to be positioned relatively, and to be the full-width provided by the browser.
html, body {
position: relative;
width: 100%;
min-width: 100%; //we do both width and min-width for compatability with old browsers
}
Now that that's out of the way, you have a starting point for your dynamic width. If the table is a direct child of the <body> element, then you should define a class for it that will also give it a width of 100%. Remember, this width maps to the width of it's parent, so since the <body> is the full page width, then the table will attempt to be too! If you want to add some space around it (so that it doesn't literally hit the page edges, you can add some padding too!
.fullWidthTable {
position: relative;
width: 100%;
min-width: 100%;
padding-left: 20px;
padding-right: 20px;
}
Now you can put that class on your table element, and it should map to the page size! Keep in mind that if your images don't re-size according to the size of their <td> parents, then they might overlap or have some other undesired behavior.
Using Bootstrap
So if you're interested in using existing frameworks for organizing your html elements on the webpage, I would strongly recommend Bootstrap. Bootstrap provides you a number of pre-defined classes that have a consistent and predictable structure which you can use to make dynamic websites. In general, bootstrap structure involves three main classes:
containers
rows
columns
It's actually quite similar to working with an html table - but it takes dynamic sizing into account by design.
You can find full documentation and examples for using Bootstrap here: Bootstrap Docs
I'm using the Foundation framework for my website and there's an extra white-space around the the whole body (the gutter). To remove the gutter I've tried:
*{margin:0;padding:0;}
body{margin:0;padding:0;}
Downloading custom Foundation with gutter set to 0
None of which has worked out for me. What can be done to remove that extra white-space?
Here's the screenshot with gutter highlighted with red
This is most likely not a margin issue but a max-width issue. Using DevTools you'll probably find that your .row class has a max-width of 62.5rem, which I think is standard. (I work on a site that has a modified width of 72.5rem.)
I think it's a good idea to maintain some version of this limitation if you have normal page content that people will have to actually read on large screens. But you can safely override it where you want 100% width.
You can do so by adding a class that overrides the default max-width and selects the relevant element with sufficient specificity in your style sheet.
Alternatively, you can refrain from using class .row on outer containers that you want to span the page. This allows you the option of putting rows within. This way you could, for example, have your teal background span the page but keep the content constrained and aligned with normal grid-based content below.
You can read more about the Foundation grid here, including how to customize row width via SASS variables if you're into that sort of thing.
I have used the bootstrap framework to create a responsive site, however I have not used the bootstrap .container class.
For my project, all the content sits withing a div with a class of .wrapper. The wrapper is fluid and has a width of 80%, max with 1200px and min width 360px.
Within the wrapper I have used the standard .row and .col Boostrap classes.
I have tested the site and everything works as expected. The site validates and (even works on ie-9) and mobile devices.
Is it OK to use the above method without the .container class?
Many thanks,
p
There's no reason that you must use container elements. However, the .container-fluid class does almost exactly what you describe. I'd consider switching your custom wrapper to that for standardization and ease of maintenance.
Regarding your row margins--that's not a great idea. You may find yourself wanting to do a modern "flat" design where you'll want some of your rows stacked tightly. It's usually better to leave grid elements alone, and apply margins and padding to inner elements. You could put a class on the row to do so:
.row.padded > div div { /* > div should be a column */
margin: 1em 0;
}
<div class="container-fluid">
<div class="row padded">
<div class="col-xs-12">
<div> ... </div> <!-- this will have a margin -->
If you don't use rows, you are fine. Rows go to negative margins without container.
edit: Anyway, if you use bootstrap3, you should be fine even with rows...
Bootstrap is a big set of classes that are meant to be useful; however, by no means are you forced to use them. If you want something more customized than the default Bootstrap classes, then using your own class is totally fine.
I have this CSS: https://cal-linux.com/styles/tutorial.css
And a sample page that uses it: https://cal-linux.com/tutorials/gswc++.html
When I display this on a smartphone (or when I check it through Google's Mobile friendliness verify service), the layout looks huge (badly cropped, instead of reduced to fit the smartphone's screen.
I only use proportional measures (for example, outsidecontainer's div has width 80%, inside right-most column has min-width 25%). I'm placing Google Ads in there, but it's a "Responsive" add, which is supposed to adapt to the page's available size and layout.
Any tips on this? I figured posting the actual links to the pages might be ideal; but please let me know if a "minimal" instance of code that reproduces the problem would be preferred.
Thanks,
Cal-linux
There are a few things I note here:
You use display:table-row and display:table-cell a bit too much. Those don't respond as well to the resizing especially if you have not specified the width of each item. Instead either use floats with a clear:both on the container's :after pseudo-element or inline-block. Either way you should define percent widths for the containers.
Your css has a lot of white-space:nowrap but doesn't use overflow:auto which forces the element to not resize the content and just stretch its parent container.
Aside from that a few places I see a fixed px width which makes it more difficult to resize. It doesn't seem to be your ads. Although google's script does throw an error about trying to put an ad in an 86px x undefined space. You can set a fixed height or at least a min-height to give the script an idea of how big an ad should be placed there.
The easiest solution is to incorporate bootstrap to do the heavy lifting of setting up a grid for what you want.
You can basically do your two column style like so:
<div class="container-fluid">
<div class="left-col col-md-11">
<!--- ALL YOUR CONTENT HERE //-->
</div>
<div class="right-col col-md-1">
<!---Google Ads go Here //-->
</div>
</div>
If you want to stick with your own style, by using the code inspector in chrome I was able to get to the following result when resized:
I made the tablerow class be a standard display:block
The first column was set to width:75%; display:inline-block;
The second column was set to width:25%; display:inline-block;
The autosize elements changed to display:block;max-width:100%; overflow:auto;width:auto;padding:0
The div.code blocks were changed to display:block;white-space:nowrap;width:auto;
Everything else stays the same pretty much. That should fix it, however you should note that frameworks like bootstrap help out with mobile sites by making the page columns collapse and go one ontop of another for mobile browsers so that they get maximum space.