so I need someone to proof my code because I think it might be missing a div or something more.
basically one section of the html code works fine on big screens such as desktop tablets but when on the mobile screen such under 450px width it does not centre im just wondering what the cause is.
i've have used css grid and tried to fix it
the section is under:
<div class="main-rules">
<div class="section-rules">
<h2 class="rules-heading">Rules/Guidelines</h2>
<div class="rules">
here is the jsfiddle:
https://jsfiddle.net/kpwsbfc2/
and here is the real site:
http://tawedgame.epizy.com/index.php
Please add
#media(max-width:450px){
h2.rules-heading {
word-break: break-all;
}
.player-value {
width: 280px;
}
.player-value button {
width: 113px;
}
.player-value span {
margin: 0 -48px;
}
}
Related
I have some cards with an image and a title below them, where the image and title resize as the card resizes, and the card resizes as the screen size changes. On smaller screens or with longer titles I get a problem where the image covers the text.
I would like the image to scale to fit the card, but stop either when it reaches the width of the card OR the top part of the text. (all images are perfect squares, so img width and height should always be equal)
Here are some screenshots of the results, On the left side are two things that I don't want to happen, and on the right are things that are OK.
link to image examples of cards
Since the complete code is a bit long, here is a JSFiddle with a working example of what it's like now (the cards are in bootstrap styled rows/columns). http://jsfiddle.net/js47withfeeling/dtbx78ay/4/
Below are some relevant code snippets.
HTML of a card
<div class="card-column card">
<img class="card-img" src="Link to Image">
<p class="card-title">With Security</p>
</div>
A bunch of cards like that are inside of this HTML block which applies some bootstrap
<div class="row">
<div id="loadCardsHere" class="col-md-9 12u(mobile)">
<!--cards go here -->
</div>
</div>
relevant CSS
body{
font-family: 'Old Standard TT', serif;
}
.card{
margin-top:5px;
margin-right:5px;
}
.card-img{
width:100%;
max-height:500;
}
.card-title{
position:absolute;
bottom:0;
align-self: center;
font-size:180%;
}
.card-column{
float: left;
width: 32%;
height:300;
cursor: pointer;
border-color: #01ABAA;
border-width: medium;
}
#media screen and (max-width: 600px) {
.card-column {
width: 100%;
}
}
#media (min-width: 768px) {
.card{
max-width:33%;
max-height:auto;
}
}
Is there some sort of CSS attr like " max-height: (parent.height) - (parent.2ndChild.height) "? (That syntax is obviously wrong, but something to that effect)
Popshuvit is correct. Also, align-self is a flex property but there is no flex-parent to give this context. You should take the flex route though. I have not tested, but the result you want will probably look like this:
.card {
position: relative;
display: flex;
flex-flow: column;
text-align: center;
align-items: center;
width: 100%;
}
.card-img {
width: 100%;
object-fit: contain;
}
.card-title {
...text styles
}
Additionally, you seem to have separate styles for .card and .card-column when they are actually the same element. This would only make sense if some of the 'cards' did not include the .card-column class. Continuing down the flex route will also allow yuo to get rid of those pesky floats!
Remove position:absolute; bottom:0; from .card-title. Absolute removes it from the flow, and it has no context as to the height of other divs/elements.
I feel silly asking something that seems so rudimentary, but I just can't figure this out.
I've got a Wordpress theme with a side bar. I want to put a simple author bio on the side (an image with a bit of text and a link underneath).
When the theme responds down, this sidebar drops below the main content area and gets HUGE, so I'd like for the layout to switch to a smaller image on the left and text on the right.
It seems simple, but various code I've been trying to write or grab off the internet still isn't working.
Here's the HTML and CSS I've been trying so far:
<div id="bioblock">
<img id="bioimg" src="via.placeholder.com/600x600" alt="Blog Author" style="width:100%; margin-bottom: 10px;">
<div id="bioblurb">
<h3>Welcome to My Blog</h3>
<p>This is a bit about the blog and the author. It will be several lines long.</p>
</div>
</div>
The CSS:
#bioblock {
padding-bottom: 0;
}
#media screen and (min-width: 0px) and (max-width: 1024px) {
#bioblock { display: block; width: 50%;}
#bioblock #bioimg {height: auto; display: inline; float: left;}
#bioblock #bioblurb { float: right; }
}
I tried to find a preexisting widget out there to handle this, but the author bio widgets are awful and the image + caption ones don't seem to solve it.
I'd love any help anyone could offer. I'm sure I've made a bazillion dumb errors here, please don't laugh too hard at my code. Feel free to burn my stupid code attempt to the ground and suggest another way to do this!
If you don't want the text to float around the image (i.e. also go under it), you should use display: inline-block for both the image and the text container, both with fixed width (meaning percentages or pixels, choosen so that both can fit into the parent element side by side). And it's good to use some other settings too, see below.
#media screen and (max-width: 1024px) {
#bioblock {
display: block;
width: 50%;
}
#bioblock #bioimg {
height: auto;
display: inline-block;
width: 35% !important;
height: auto;
vertical-align: top;
}
#bioblock #bioblurb {
display: inline-block;
width: 60%;
margin-left: 2%;
vertical-align: top;
}
h3 {
margin-top: 0;
}
}
<div id="bioblock">
<img id="bioimg" src="http://via.placeholder.com/600x600" alt="Blog Author" style="width:100%; margin-bottom: 10px;">
<div id="bioblurb">
<h3>Welcome to My Blog</h3>
<p>This is a bit about the blog and the author. It will be several lines long.</p>
</div>
</div>
I have some code inside pre and code tags in a bootstrap container that I'd like to scroll horizontally. This normally works fine, until I add a flexbox to my page's body in order to accomplish a sticky footer. After this, the code no longer scrolls horizontally when the page is narrow (such as for mobile viewing).
Here's my code (note that horizontal scrollbars for the code go away as you narrow the window):
html, body {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
code {
max-height: 200px;
background-color: #eeeeee;
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
}
.flexer {
flex: 1;
}
footer {
background-color: #CCC;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-12 docs">
<p>Some sample code</p>
<pre><code>Loading mirror speeds from cached hostfilebase: mirrors.arpnetworks.com * centosplus: mirrors.arpnetworks.com* extras:mirrors.arpnetworks.com*rpmforge: mirror.hmc.eduupdates: mirrors.arpnetworks.comExcluding Packages in global exclude list</code></pre>
</div>
</div>
</div>
<div class="flexer"></div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
footer
</div>
</div>
</div>
</footer>
http://jsfiddle.net/nturor46/1/
Any idea how to use flexbox for sticky footers while still maintaining scrolling pre / code?
a simple
.container { width:100%; }
resizes the website correctly. BUT then, Chrome doesn't let you actually use the scrollbar. This is caused by it overflowing the dimension of all of its containers (apart from BODY).
Hence we gotta tell the browser to correctly recognize the pre node:
.container {
max-width: 100%;
}
pre {
position: relative;
}
This tells Chrome to correctly handle mouse events again AND fixes the layout
Please note that the margin-bottom of the pre-node is lost in overflow-country, which could cause your layout to look weird. max-width was used in the final version to make sure it doesn't overwrite fixed width statements made in bootstrap
PS: tested in current Chrome and Firefox http://jsfiddle.net/nturor46/32/
Those bootstrap styles just wreak havoc on natural CSS!
The problem seems to come from a conflict between your column-direction flex container and bootstrap rules. It's basically resulting in the horizontal scrollbar shifting from the pre / code content box to the browser window, when the content box overflows the screen.
With these adjustments, your desired layout seems to work:
make the primary .container div the primary flex container (in your code this role is played by the body element)
move the footer element into this new container
use flex auto margins to stick the footer to the bottom
override bootstrap margin, padding and width wherever necessary
HTML
<div class="container">
<div class="row">
<div class="col-md-12 docs">
<p>Some sample code</p>
<pre><code>Loading mirror speeds from ... cached hostfilebase</code></pre>
</div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
footer
</div>
</div>
</div>
</footer>
</div>
CSS
html, body { height: 100%; }
body > .container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%; /* override bootstrap styles */
padding: 0; /* override bootstrap styles */
}
body > .container > .row {
margin: 0; /* override bootstrap styles */
display: flex; /* nested flex container */
justify-content: center; /* center content box on page */
}
body > .container > .row > .docs {
width: 75%; /* adjust width of the content box here */
}
code {
max-height: 200px;
background-color: #eeeeee;
word-break: normal !important;
word-wrap: normal !important;
white-space: pre !important;
}
footer {
margin-top: auto; /* stick footer to bottom of container */
background-color: #CCC;
}
Revised Fiddle
Tested in Chrome and Firefox.
What happens here is most definitely a bug in Chrome.
After playing around with your Fiddle, and looking at it with other browsers, I can conclude that this is a Chrome-specific problem. And a curious one.
For some reason, <div class="col-md-12 docs"> grows to the size it should have (the height of p and pre together), but doesn't account for the horizontal scrollbar inside the pre tag.
Here's an image to demonstrate the problem. The part with the red background is the container.
Since pre has a border of 1px wide at the bottom, the result leaves a 1px gap for you to actually use the scrollbar. You can try it yourself. Just try to grab the most upper 1px line of the scrollbar.
Removing the flex properties does fix your problem, but we're not going to accept that.
Now, I would've thought that adding a padding of 0.1px to the bottom of the parent would fix the problem, but it didn't. I then tried wrapping the pre tag in a div with class chromefix, and then added the following CSS
.chromefix{
overflow: hidden;
}
But that created an even weirder situation where the container grew with the scrollbar for about 50%
So I tried combining the two, but not a lot of difference there.
This is where I started looking at the pre tag and its properties. It has overflow: auto by Bootstrap default. So what I tried was adding
pre{
overflow-x: scroll !important;
}
And guess what? It worked!
So all you have to do is add overflow-x: scroll !imporant to pre, and you're good to go! Here's a working Fiddle.
Hope this helps
As a sidenote. I think you want to move max-height: 200px to pre as well. It won't work when you've applied it to code.
Problem seems to be with the width of <pre>.
When width of your screen goes below 768px no specific width is applied to the .container by bootstrap hence the issue is occurring.
When width of your screen is above 768px following classes from bootstrap.css come in picture.
#media (min-width: 1200px)
.container {
width: 1170px;
}
#media (min-width: 992px)
.container {
width: 970px;
}
#media (min-width: 768px)
.container {
width: 750px;
}
As you can see once the width goes below 768px there is no specific width given.
To counter this issue, you have to write your css, something like this.
#media (min-width: 480px) {
.container {
width: calc(100% - 40px);
}
}
Basically, you have to specify width for .container when screen width goes below 768px. Once you do, it will fix your issue.
Wrap the prev tag and its content with div like below.
<div class="code">{your code goes here}</div>
css :
.code{
width:92vw; /*you can change this in media query to specific device width for better results*/
overflow-x:auto;
}
Working jsfiddle link
So I'm developping MVC app and am not very experienced in this feature, and I have encountered a problem which bugs me.
My desktop resolution is 1920x1080. When any app is rolling in fullscreen, it displays normally. But if the window is resized (ex: clicking on the button on the upper-right border of the browser), everything gets crunched in the middle.
Or I would like at least that the full dimension width of my browser / app be maintained at all time and that a scrolling bar shows down on the page because I do not have the time / resources to work on a "resize" app or script, if that even exists.
Can anyone help me out? Don't hesitate to add information or ask for more info if you need, I love to learn new stuff.
EDIT
Here are some images took a short while ago. The normal view:
And when the window is resized:
Another image from another app:
And the same image when resized:
Like I said, in those 2 cases I would like everything to remain as they are and the user would have to scroll horizontally. I figure that it would be less "painful" to develop that way than to recalculate / resize everything...
EDIT 2
For those familiar with MVC templates, here's some coding that I have added for one of my app, maybe that will help me understand what's happening.
First the _Layout view:
<div id="body">
<div>
<div id="leftSide">
#{
Html.RenderAction("ShowCardSetLinks", "Home");
}
</div>
<div id="inner">
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<div id="rightSide">
#{
Html.RenderAction("GetCardOfTheDay", "Home");
}
</div>
</div>
<div id="dialog-modal" title="See Card Detail"></div>
</div>
Then the CSS I have added:
#body {
width: 1920px;
display: table-cell;
table-layout: fixed;
}
#leftSide {
width: 20%;
display: table-cell;
position: relative;
}
#rightSide {
width: 20%;
display: table-cell;
position: relative;
}
#inner {
width: 70%;
display: table-cell;
position: relative;
}
that's about it for the main layout, if I have anything else, I will post it.
Remove display: table-cell; from all of your CSS. This is not proper structure. Especially remove it from the body tag and the table layout (awful bro). Why do you have a width on the body tag too - and for that large?? This not good coding practice at all...change to this and let me know if it works. Wrap all your main content is a wrapper with the class I specified below.
You also had 70%, 20%, and 20% as widths. That's 110%. Obvs can't exceed 100%. I changed this.
EDIT: I see that you had an ID named BODY and it wasn't the body tag (you should rename this). My mistake. See update below...
#body {
position:relative;
margin:0 auto;
width:100%; // change it to whatever value you want your site, but don't exceed 980px. Just leave it at 100% if you want a fluid site.
overflow: hidden;
clear:both;
}
#leftSide {
width: 20%;
position: relative;
float:left;
}
#rightSide {
width: 20%;
position: relative;
float:left;
}
#inner {
width: 60%;
position: relative;
float:left;
}
I'm learning HTML/CSS in my web standards design course this month and this week we are fixing our websites to be responsive.
I have converted all of my px to percentages and all font from px to em. I messed something up with the max-width: 100% on my gallery.
I'll post my link instead of all the codes.
http://jgoldd.github.io/wsd/index.html
Take the width and margin off your body tag. Make a class called a wrapper and add it inside your containers eg
.wrapper{
max-width:960px;
margin:0 auto;
width:100%;
}
<header>
<div class="wrapper">
// put your content in here
</div>
</header>
<div id="content">
<div class="wrapper">
// put your content in here
</div>
</div>
<footer>
<div class="wrapper">
// put your content in here
</div>
</footer>
If you don't want to do this you could just set your body to
body{
max-width:960px;
width:100%;
}
But I would change your structure to the way with a wrapper is good to practice clean code hygiene from the start :-)
Your css is too buggy. So, let me explain you a simple technique to activate responsive behavior to images
Try this code in HTML
<img class="resize" src="http://jgoldd.github.io/wsd/images/mountains1.jpg">
CSS
.resize {
max-width: 100%;
height: auto;
width: auto;
}
This code simple activates the responsive behavior on images.
Do let me know if you have any queries...! :)
You're going to need to play with it a bit, but here is a quick bit to get you going in the right direction. (remove the lines I commented with REMOVE)
#gallery li{
width: 49%;
display: inline-block;
.display: inline; /* for IE 8 */
zoom: 1; /* for IE 8 */
/* float: left; REMOVE */
}
#gallery img {
width: 100%;
/* max-width: 100%; REMOVE */
}
#gallery_container{
width: 100%;
/* width: 41.666667%; REMOVE */
}
Give it a try. Should give you better results and hopefully get you where you want to be.