Like the question says, Is there any way to avoid the overflow x?
Many Thanks in advance
https://github.com/1GCONF/simple_social_media.git
enter image description here
#edit: found the answer:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/style.css">
<script src="main.js" async defer></script>
</head>
<body>
<section class="section">
<nav>
<div class="port_item">Nav</div>
</nav>
<div class="port">
<div class="port_item">Profile</div>
<div class="port_item">Berichten</div>
<div class="port_item">Component X</div>
<div class="port_item">Component X</div>
<div class="port_item">Component X</div>
</div>
</section>
</body>
<style>
#import url("https://fonts.googleapis.com/css2?family=Kameron:wght#400;700&display=swap");
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: 0;
text-shadow: 0 4px 4px rgba(25, 25, 25, 0.25);
font-family: 'Kameron', serif;
font-weight: 200;
}
body .section {
display: grid;
grid-template-columns: 2fr 7fr;
justify-content: center;
align-items: center;
outline: 2px solid red;
width: 75%;
margin: 5ex auto;
}
body .section nav {
outline: 2px solid red;
}
body .section .port {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
body .section .port .port_item {
outline: 2px solid red;
height: 250px;
}
</style>
</html>
Is responsive and Looks like this:
responsive grid without queries
I'm picking up bootstrap after some time away,
I trying to create a simple responsive page
but I'm finding that when I resize the browser to a certain point
my central div overlaps the div above.
I've tried adjusting media queries, setting the top margins etc.
I've mocked up a page for viewing below
Thanks
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>bwin slot game</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="styles.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
</head>
<body>
<div class="container-fluid">
<div class="sitebg">
<div class="row">
<div class="col-md-12 clearfix header">
<div id="tContainer"></div>
</div>
</div>
<div class="row">
<div id="game_container">
<div class="col-md-8">
<div id="sContainer" class="pull-right"></div>
</div>
<div class="col-md-4">
<div id="sContainer2"></div>
</div>
</div>
</div>
<div class=" row clearfix">
<div class="col-md-12"><div id="bContainer"></div></div>
<div class="faqs col-md-12"><div id="bContainer2"></div></div>
</div>
</div>
</div>
</body>
</html>
CSS:
/*
* Globals
*/
/* Links */
a,
a:focus,
a:hover {
color: #fff;
}
/* Custom default button */
.btn-default,
.btn-default:hover,
.btn-default:focus {
color: #333;
text-shadow: none; /* Prevent inheritence from `body` */
background-color: #fff;
border: 1px solid #fff;
}
/*
* Base structure
*/
html,
body {
height: 100%;
background-color: #333;
}
body {
color: #fff;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
#sContainer{
width:900px; height:500px;
background-color:#ccc;
}
#sContainer2{
width:320px; height:368px;
background-color:#c88;
}
#tContainer{
width:1087px; height:49px;
background-color:#c8c;
margin:0 auto;
}
#bContainer{
width:1087px; height:93px;
background-color:#ccc;
margin:0 auto;
}
#bContainer2{
width:970px; height:329px;
background-color:#c8c;
margin:0 auto;
}
.header{
background-color: #fff;
position: fixed;
top: 0;
}
/* Extra markup and styles for table-esque vertical and horizontal centering */
.footer{
position: fixed;
bottom: 0;
width: 100%
}
.faqs{
background-color:#0b1140;
}
#accepted_payments img, .faqs img{
margin: 0 auto;
}
/* width:100%
* Header
*/
#media (min-width: 768px) {
.masthead-brand {
float: left;
}
#game_container{
width:90%;
margin:10% auto 10% auto;
}
}
/*Game*/
#game_container{
width:90%;
margin:10% auto 10% auto;
}
#game{
padding-right: 0;
padding-bottom: 100px;
}
/*
* Footer
*/
#accepted_payments {
text-align: center;
width: 100%;
background: #fff;
min-height: 38px;
margin-top: 50px;
vertical-align: top;
}
/*
* Affix and center
*/
#media (min-width: 768px) {
/* Pull out the header and footer */
#game_container{
width:100%;
height:500px;
margin:10% auto 100px auto;
clear: both;
}
}
#media (min-width: 992px) {
#game_container{
margin:10% auto 100px auto;
width:100%;
margin:0 auto
}
}
#media (min-width: 1700px) {
#game_container{
margin:6% auto 100px auto;
width:70%;
}
#game{
padding-right: 5%;
}
}
Sorry just noticed the header class was position:fixed
Once I took that out works better now
I was looking for some help in regards to media queries. This is the first time I am using this on a site, but it doesn't seem to work. This is also the first time I am changing my html4 code to html5, not sure if that's where the problem lies.
My HTML Code:
<!doctype html> <!-- html5 doctype -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- line added to for responsive layout -->
<title>Dummy Site</title>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="wrapper">
<header></header>
<div id="spacer1"></div>
<div id="banner"></div>
<div id="range"></div>
<div id="spacer2"></div>
<div id="cols"></div>
<div id="spacer3"></div>
<footer></footer>
</div>
</div>
</body>
</html>
My CSS:
body {
margin:0 auto;
background:#f5f3ef;
}
a {
font-family: 'Arial';
font-size: 12px;
color: #66308f;
text-decoration:none;
font-weight:bold;
}
#container {
margin: 0 auto;
height: 1264px;
width: 100%;
}
#wrapper {
margin: 0 auto;
height: 1264px;
width: 893px;
background-color:#0CF;
}
header {
margin:0 auto;
height: 171px;
width: 883px;
}
#spacer1 {
height:59px;
}
#banner {
margin:0 auto;
width: 883px;
height: 439px;
background:url(z_imgs/banner.jpg) no-repeat;
}
#range {
margin: 0 auto;
height: 246px;
width: 883px;
}
#spacer2 {
height:24px;
}
#cols {
margin: 0 auto;
height:188px;
width:883px;
}
#spacer3 {
height:39px;
}
footer {
margin: 0 auto;
height:98px;
width:883px;
}
<!-- MEDIA QUERIES -->
#media (max-width: 850px) {
#wrapper {
background-color: red;
}
}
When I resize the browser to below 850px the color still stays the same and doesn't change to red.
It does not work since you are using HTML comments inside CSS code which leads to syntax error and browser not recognizing the code. Remove the comment or modify it from <!-- --> to /* */ and it works.
body {
margin: 0 auto;
background: #f5f3ef;
}
a {
font-family: 'Arial';
font-size: 12px;
color: #66308f;
text-decoration: none;
font-weight: bold;
}
#container {
margin: 0 auto;
height: 1264px;
width: 100%;
}
#wrapper {
margin: 0 auto;
height: 1264px;
width: 893px;
background-color: #0CF;
}
header {
margin: 0 auto;
height: 171px;
width: 883px;
}
#spacer1 {
height: 59px;
}
#banner {
margin: 0 auto;
width: 883px;
height: 439px;
background: url(z_imgs/banner.jpg) no-repeat;
}
#range {
margin: 0 auto;
height: 246px;
width: 883px;
}
#spacer2 {
height: 24px;
}
#cols {
margin: 0 auto;
height: 188px;
width: 883px;
}
#spacer3 {
height: 39px;
}
footer {
margin: 0 auto;
height: 98px;
width: 883px;
}
/* Media Queries */
#media (max-width: 850px) {
#wrapper {
background-color: red;
}
}
<!doctype html>
<!-- html5 doctype -->
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- line added to for responsive layout -->
<title>Dummy Site</title>
<link href="style5.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="wrapper">
<header></header>
<div id="spacer1"></div>
<div id="banner"></div>
<div id="range"></div>
<div id="spacer2"></div>
<div id="cols"></div>
<div id="spacer3"></div>
<footer></footer>
</div>
</div>
</body>
</html>
I have issue with background for element article. I use :nth-child(n), but they do not work correctly at my localhost. When I same code place to jsfiddle all is ok.
Code at my local is following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>:: Nove pokusy s Yablkem ::</title>
<link rel="stylesheet" href="/ath/css/normalize.css">
<link rel="stylesheet" href="/css/yablko.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<article>Jsem ve středě?</article>
<article>Všichni co se moc ptají se nic nedozví...</article>
<article>Marmelada</article>
<article>Sýrové kuličky || Menu</article>
</body>
</html>
CSS (yablko.css)
html, body {
height: 100%;
}
body {
padding: 1em;
margin: 0;
background: orange;
font-size: 20px;
display: flex;
align-items: center;
justify-content: baseline;
justify-content: center;
flex-direction: row;
}
article {
padding: 1.2em;
background: #336dd1;
border-radius: .8em;
margin: 5px;
}
article:nth-child(1) { background: #888; }
article:nth-child(2) { background: #ccd; }
article:nth-child(3) { background: #333; font-size: 10px; }
article:nth-child(4) { background: #aaa; font-size: 30px; }
Image from local (bad result):
Image from jsfiddle (ok result):
Can I ask for help? Thanks
I'm making a wordpress template from scratch.
I've eliminated many of the files and kept in just the header.php, footer.php, index.php, and style.css to rule out many of my potential problems.
I've played with the code, looked up questions, googled for my solution, but I'm not sure why my style isn't being recognized when i go to my site
the following are my 4 files:
style.css
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* MAIN STYLE */
html {
font-size: 20px;
}
body {
}
#bodywrapper {
background: gray;
font-family: arial, sans-serif;
font-size: 5em;
}
header {
height:20em;
background: #000;
color: #fff;
margin: 0 auto;
}
#nav {
}
#nav ul {
list-style-type: none;
}
#nav ul li {
display: inline-block;
padding: 1em;
}
#nav ul li a{
padding: 1em;
text-align: center;
text-decoration:none;
}
#nav ul li a div{
height: 5em;
width: auto;
padding: 1em;
background-color: black;
}
#sandwichwrapper {
margin: 2em;
border: 1em solid black;
}
#sidebar {
float: right;
width: 15em;
margin: 2em;
border: 1em solid green;
}
#main {
float: right;
width: 15em;
margin: 2em;
border: 1em solid blue;
}
#comments{
clear: both;
margin: 2em;
border: 1em solid yellow;
}
#comment-form{
}
footer {
clear: both;
margin: 0 auto;
padding: 1em;
background: #000;
color: #fff;
}
/* BUNDLED STYLES */
header, footer{
width:100%;
margin:0 auto;
padding: 5em;
overflow:auto;
}
nav #sandwich {
width: 50em;
}
/* TEXT RULES */
h1 {
size: 10em;
color: green;
}
h2 {
size: 8em;
}
h3 {
size: 6em;
}
h4 {
size: 4em;
}
h5 {
size: 2em;
}
header.php
<!doctype html>
<html>
<head>
<title>The Logic Spot</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<meta charset="utf-8" />
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
header("Content-type: text/css");
</head>
<body>
<div id="bodywrapper">
<header>
<h1><?php bloginfo('name')?></h1>
</header>
<div id="nav">
<?php wp_nav_menu();?>
</div>
<div id="sandwichwrapper">
index.php
<?php get_header()?>
<!--div#bodywrapper contained in header.php-->
<!--div#sandwich contained in header.php-->
<?php get_sidebar()?>
<div id="main">
<?php while(have_posts()): the_post()?>
<h2><?php the_title()?></h2>
<p>By <?php echo get_the_author_link();?></p>
<?php the_content(__('Continue Reading'))?>
<?php endwhile?>
</div>
<!--div#sandwich contained in footer.php-->
<!--div#bodywrapper contained in header.php-->
<?php get_footer()?>
footer.php
</div> <!-- close div#sandwichwrapper-->
<footer>
<?=date('Y')?> Copyright
</footer>
</div> <!-- close div#bodywrapper-->
</body>
</html>
Add this line in the <head> tag
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Hey you need to specify absolute path to the stylesheets, for example
<link type="text/css" rel="stylesheet" href="http://www.yourwebsite.com/wp-content/themes/yourtheme/style.css" />
Also as Matt stated, you can use functions like get_stylesheet_directory_url() or get_stylesheet_uri() to make your path more dynamic.