The image when browser is collapsed to minimal size
Original site view
Site from mobile view
When site is collapsed, the text is going outside the block's frames. The same is happening when the mobile view is turned on at DevTools.
For developing I used Bootstrap 4.
Text needs to go on new line in block frames, instead it going out of it. overflow-wrap does not change anything.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.css">
<title>Визитная карточка</title>
</head>
<body class="setting-body">
<div class="head">
<h1>Домашнее задание</h1>
</div>
<div class="copy-jumbotron jumbotron ">
<div class="row parent">
<div class="col-md-4 col-lg-4 col-sm-4 setting-div-for-image">
<div>
<img class="setting-image" src="Resources/Avatar.jpg" />
</div>
</div>
<div class="col-md-4 col-lg-4 col-sm-4 setting-information">
<h2>Королев Максим Евгеньевич</h2>
<p>Студент с многопрофильного колледжа ТИУ, желающий научиться программировать</p>
<p>Ссылки на социальные <wbr /> сети:</p>
<div>
<div class="links">
<div class="links">
<a class=" links-iteems text-links" target="_blank" href="https://github.com/MaxZmoZg">
<img class="img-links" src="Resources/Git-Icon-Black.png" />
<p class="paragraph">GitHub</p>
</a>
<a class="links-iteems text-links" target="_blank" href="https://vk.com/max_koroliov">
<img class="img-links" src="Resources/Vklogo.png" />
<p class="paragraph">Вконтакте</p>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS:
*{box-sizing:border-box;}
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
.parent {
display: flex;
width: 90%;
flex-direction: row;
}
.setting-image{
width:150px;
height:150px;
border-radius:90px;
align-content:center;
}
.setting-div-for-image {
display: flex;
align-items: center;
justify-content: center;
}
.setting-information{
width:100% !important;
overflow-wrap: break-word;
}
.links {
display: flex;
}
.links-iteems {
display: flex;
margin-right:20px;
}
.img-links{
width:30px;
height:30px;
flex:auto;
}
.text-links {
text-decoration: none;
color: black;
font-size: 14px;
}
.text-links:hover {
text-decoration: none;
color: #1f8ac8;
font-size: 14px;
}
.paragraph {
display:flex;
margin:0px;
margin-left:10px;
align-items: center;
justify-content: center;
}
.copy-jumbotron {
margin-top: 100px;
background: #fcfafa !important;
-webkit-box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
box-shadow: 0px 5px 12px 1px rgba(34, 60, 80, 0.2);
border-radius: 20px;
overflow-wrap: break-word;
}
.head{
font-size:25px;
}
.setting-body{
margin-right: 15px;
margin-left: 15px;
}
I have tested this on JSFiddle and on my own system and it seems to be working fine.
This is possibly down to Operating system + browser combination differences. Could you please add the OS and Browser you are seeing this issue for? Then we can try to replicate the issue :)
Related
As you see I can't minimize more the width in viewing mode, but I can do it in Inspecting mode. Why?
Here is the code of my website:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<meta name="description" content="N"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="main.css" type="text/css"/>
<meta name="robots" content="all"/>
</head>
<body>
<section id="contact">
<div class="social">
<i class="fa fa-facebook-f"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-dribbble"></i>
<i class="fa fa-behance"></i>
</div>
<div class="contact-box">
<div class="c-heading">
<h1>Get In Touch</h1>
<p>Call Or Email Us Regarding Question Or Issues</p>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1701.5252574812218!2d74.31603229143637!3d31.46779655679461!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x391906abd2d8f2db%3A0x2d4bd93a1eb25b41!2sArfa%20Technologies!5e0!3m2!1sen!2s!4v1596774150754!5m2!1sen!2s" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</section>
</body>
</html>
body{
margin:0px;
padding: 0px;
background-color: #FFFFFF;
}
a{
text-decoration: none;
}
.social a{
padding: 20px;
color:#7b7c7c;
font-size:1.1rem;
}
#contact{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
display: flex;
align-items: center;
}
.social{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
box-shadow: 2px 2px 30px rgba(0,0,0,0.1);
}
.social a:hover{
color:#000000;
transition: all ease 0.3s;
}
.contact-box{
background-color:#434445;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px 30px;
box-shadow: 2px 0px 30px rgba(0,0,0,0.1);
}
.c-heading h1{
font-family: Roboto;
color: #e7eef3;
font-size: 2.5rem;
font-weight: lighter;
margin: 0px;
padding: 0px;
}
.c-heading p{
font-family: Roboto;
color:#cecece;
font-size: 0.8rem;
font-weight: lighter;
margin: 0px;
padding: 0px;
text-align: center;
}
.map{
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
}
#media(max-width:1100px){
.map{
display: none;
}
}
#media(max-width:450px){
.social{
display: none;
}
.contact-box{
width: 100%;
height: 100vh;
box-sizing: border-box;
}
#contact{
position: static;
transform: translate(0,0);
width:100%;
height: 100vh;
box-sizing: border-box;
}
.c-heading h1{
font-size: 2.2rem;
text-align: center;
}
}
Viewing mode
Inspecting mode
I tried something with the #media and max-width it is not working too.
Why can't I change the width of my website while I'm normally viewing it, but I can do it while I am inspecting it?
I viewed the code and I can't see the problem.
Your Code is actually Fine, its the minimum Browser size for chrome(which i tested on) and other browsers, I cant see why you would make it that small, but here is the minimum size i can get with inspect element
https://ibb.co/sCQQnV9
Its not your code, but the browser
hope it helps
I have 3 rows with text and on hover I want the text on the right side to change and the background color of that text as well. For some reason I can't make it work.
HTML
<div class="container">
<div class="row">
<div class="content">string</div>
<div class="description">A string is a series of characters.</div>
</div>
<div class="row">
<div class="content">number</div>
<div class="description">A number can be written with,or without decimals.</div>
</div>
<div class="row">
<div class="content">boolean</div>
<div class="description">A boolean can be either true or false.</div>
</div>
</div>
JSFiddle link:
see here
The result that I want to get to is this one: enter image description here
After viewing your image description, I edited your code a little bit. Hope it will fulfill your expectation.
I just add a span tag in your description.
and added/modified some CSS.
Change details:
body {
display: flex;
justify-content: center;
}
.container {
font-family: 'Red Hat Mono', monospace;
display: flex;
justify-content: center;
position: relative;
flex-direction: column;
width: 600px;
height: 600px;
}
.row {
display: flex;
background-color: rgb(178, 236, 205);
padding: 10px 0px 10px 15px;
border-radius: 50px;
margin: 15px 15px 15px 20px;
}
.content {
font-size: 1.2em;
flex:1;
font-weight: bold;
}
.description {
display: flex;
justify-content: right;
font-family: 'Lato', 'sans-serif';
color: rgb(189, 132, 27);
font-size: 0.95em;
margin-right: 20px;
font-weight: bold;
}
.row:hover .description{
background-color: rgb(80, 231, 150);
color: red;
margin-right: 0px;
margin-top: -9px;
margin-bottom: -9px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
font-size: 0.95em;
font-family: 'Lato', 'sans-serif';
}
.row:hover .description > span{
margin-top: 9px;
margin-right: 20px;
margin-left: 10px
}
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="main.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght#400;600&display=swap" rel="stylesheet">
<title>Tema 10</title>
<body>
<div class="container">
<div class="row">
<div class="content">string</div>
<div class="description">
<span>A string is a series of characters.</span>
</div>
</div>
<div class="row">
<div class="content">number</div>
<div class="description">
<span>A number can be written with,or without decimals.</span>
</div>
</div>
<div class="row">
<div class="content">boolean</div>
<div class="description">
<span>A boolean can be either true or false.</span>
</div>
</div>
</div>
</body>
</html>
Please update CSS to. You are setting font size 0 that is causing an issue
.row:hover .description {
color: rgb(0, 31, 150);
background-color: rgb(0, 1, 0);
}
I created three separate div elements for [logo, brand name],[product details] and [hamburger icon].
And in the CSS, I applied display=flex and flex=1. But the last two elements are stuck together. Can anyone help me with the mistakes in my code.
My Output
Sorry if the question was too silly, but I'm new to CSS.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container, .nav-links, .hamimg {
align-items: center;
display: flex;
flex: 1;
margin: auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh ;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
I have attached the updates.
Currently, on your implement, there is no need to set flex: 1 for all child elements of the header. If you set as follows, the nav, hamburger icon and logo will have the same width and it's not reasonable because their size is different.
I think your goal is to put the nav items in the center of header between logo and hamburger icon.
It can be simply done using margin: 0 auto.
Attached implementation shows the updated header.
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.nav-links {
margin: 0 auto;
}
.logo {
height: 5vh;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
flex: 1;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 5vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mobile Sales Dep.</title>
<link rel="icon" href="../Assets/cube.ico">
<link rel="stylesheet" href="../CSS/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
</head>
<body>
<header>
<div class="logo-container">
<img class="logo" src="../Assets/cube.ico" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</nav>
<div class="hamburger">
<img class="hamimg" src="../Assets/hamburger.ico" alt="hamBurger">
</div>
</header>
</body>
</html>
Setting flex: 1 and margin: auto isn't nescessary, just add justify-content: space-between to your header and make sure to remove the default padding from your ul:
header {
width: 95%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-between;
font-family: Lato;
font-weight: 1000;
background: rgb(30, 165, 125)
}
.logo-container,
.nav-links,
.hamburger {
align-items: center;
display: flex;
}
.logo {
height: 20px;
padding: 0px 0px 0px 10px;
}
.company-name {
padding: 0px 0px 0px 10px;
}
.navs {
list-style: none;
display: flex;
padding: 0;
}
.nav-link {
padding: 0px 5px 0px 5px;
}
.hamimg {
height: 20px;
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato">
<header>
<div class="logo-container">
<img class="logo" src="http://cdn.onlinewebfonts.com/svg/img_35506.png" alt="Cube Logo">
<p class="company-name">Mobile Sales Dep.</p>
</div>
<nav>
<div class="nav-links">
<ul class="navs">
<li class="nav-link">Specs</li>
<li class="nav-link">Questions</li>
<li class="nav-link">Reviews</li>
<li class="nav-link">Prices</li>
</ul>
</div>
</nav>
<div class="hamburger">
<img class="hamimg" src="https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png" alt="hamBurger">
</div>
</header>
I've simple section using Flex
The same section in IE 11
The problem comes from using display: flex; flex-direction: column; in defaultSection. Once removed it shows up. But I can't remove it. It's nessecary for other, more advanced use cases.
I've tried to workaround this issue by using:
#media all and (-ms-high-contrast:active) {
.defaultSection {
display: flex;
flex-direction: column;
}
}
.defaultSection {
border: 1px solid #bbbbbb;
padding-bottom: 0px;
margin: 5px;
width: calc(100% - 10px);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 5px;
}
And it seems to work. I am just not sure if that's not gonna blow things out in the long run for me. Maybe there is better alternative than this?
<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta name="author">
<meta content="2020-09-12 19:31:36" name="revised">
<title>My title</title><!-- CSS Default fonts START -->
<link href="https://fonts.googleapis.com/css?family=Roboto|Hammersmith+One|Questrial|Oswald" type="text/css" rel="stylesheet" /><!-- CSS Default fonts END -->
<!-- CSS Default fonts icons START -->
<link href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" type="text/css" rel="stylesheet" /><!-- CSS Default fonts icons END -->
<!-- CSS Always Required Default Visual Settings START -->
<style>
.defaultSection {
display: flex;
flex-direction: column;
border: 1px solid #bbbbbb;
padding-bottom: 0px;
margin: 5px;
width: calc(100% - 10px);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
border-radius: 5px;
}
.defaultSectionHead {
display: flex;
justify-content: center;
padding: 5px;
margin: 0px 0px 0px 0px;
font-weight: bold;
background-color: #00bfff;
color: #ffffff;
}
.defaultSectionText {
text-align: center;
}
</style>
<!-- CSS START -->
<style>
.overflowHidden {
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
}
.flexParent {
display: flex;
justify-content: space-between;
padding: 2px;
}
.flexParentInvisible {
display: flex;
justify-content: space-between;
}
.flexElement {
flex-basis: 100%;
}
.flexPanel {
flex-basis: 100%;
}
.flex-grid {
display: flex;
}
</style>
</head>
<body>
<div class="defaultSection overflowHidden ">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Default Section Style">Default Section Style </a> <a id="show_anchor-s17ncte" href="javascript:void(0)" onclick="show('anchor-s17ncte'); " style="display:none">(Show)</a><a id="hide_anchor-s17ncte" href="javascript:void(0)" onclick="hide('anchor-s17ncte'); " style="display:none">(Hide)</a></div>
</div>
<div name="anchor-s17ncte" id="anchor-s17ncte" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="anchor-s17ncte" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div>
<div Align="center"><span style="color:#ff0000;text-align:center">test1</span></div>
</div>
</div>
</div>
</div>
<div class="defaultSection overflowHidden ">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_anchor-1kln6uz" href="javascript:void(0)" onclick="show('anchor-1kln6uz'); " style="display:none">(Show)</a><a id="hide_anchor-1kln6uz" href="javascript:void(0)" onclick="hide('anchor-1kln6uz'); " style="display:none">(Hide)</a></div>
</div>
<div name="anchor-1kln6uz" id="anchor-1kln6uz" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="anchor-1kln6uz" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div>
<div Align="center"><span style="color:#ff0000;text-align:center">test2</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
I have built a standard footer, emulating the tourlife.com footer. However my link next to the instagram image isn't centered with the image, also the links "terms" and "help" are also out of alignment with the form. This is my second attempt using w3school's 'css grid of boxes/ equal width boxes'.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<footer class="clearfix">
<div class="box">
<img class="ig_logo" src="images/instagramicon.jpg">
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email">
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
text-decoration: none;
}
/* Main Footer */
.box {
float: left;
width: 33.33%;
padding: 20px 0px;
box-sizing: border-box;
text-align: center;
color: black;
font-size: 13px;
border-top: 1px solid black;
}
.clearfix::after {
content: " ";
clear: both;
display: table;
}
.box .biggertext {
font-size: 16px;
padding: 0px 4px;
margin-left: 6px;
}
.box a:visited {
color: black;
}
.ig_logo {
height: 100%;
width: 20px;
}
/* Middle Box */
.form {
float: right;
}
.enter {
width: 10vw;
margin-right: 10px;
padding: 6px 10px;
}
.button_1 {
background-color: black;
color: white;
padding: 6px 10px;
width: 8vw;
font-size: 12px;
text-align: center;
}
/* Right Box */
This is way easier to do with flexbox.
When you set your box width to 33.33% it doesn't know what to refer to. If you set the height of your body it will automatically give 100% width of your screen and the child to your body has a reference.
By typing "display: flexbox" your items under that class will align in a row. Voila!
By using "justify-content", you can decide how you want to spread your items and with "align-items" you can center your items vertically. You must give them space to do this though.
Your Instagram-pic didn't work, so I added a new link. I think it should work.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Main Footer */
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, Helvetica, sans-serif;
}
.clearfix {
border-top: 1px solid black;
width: 80%;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.box {
display: flex;
align-items: center;
}
.box a {
text-decoration: none;
padding-right: 10px;
color: #000;
}
.button_1 {
background-color: black;
color: #fff;
border: none;
outline: none;
padding: 10px;
}
.enter {
padding: 8px 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<footer class="clearfix">
<div class="box">
<img src="https://img.icons8.com/fluent/48/000000/instagram-new.png" />
#TOURLIFE
</div>
<div class="box">
<a class="biggertext" href="#">TERMS</a>
<a class="biggertext" href="#">HELP</a>
<form class="form">
<input class="enter" type="email" placeholder="email" />
<button type="submit" class="button_1">SUBSCRIBE</button>
</form>
</div>
<div class="box">
<p>© Copyright Ben Cotta 2020</p>
</div>
</footer>
</body>
</html>
https://jsfiddle.net/battleaxe/5rc9asn0/