I am helping some friends to create their website. But I am facing 2 issues, that I am desperately trying to fix.
The site is supposed to be a non-scrollable one-pager. But for some reason, it is not centred and you need to scroll. I am desperately trying to figure out why.
Why is there so much space between the first line of text and the first dotted line? Also I can not change the size of the dots. No matter what size I set.
Here's the website: https://www.ideenschmelze.de/
PS: The HTML is embedded as an Elementor element. I first thought that's causing the scrolling issues. But if I don't make it via Elementor, the logo is also displaced horizontally.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
transition: background-color 0.5s ease;
}
.orange-theme {
background-color: #F08831;
}
.blue-theme {
background-color: #4FC1EC;
}
.default-theme {
background-color: white;
}
#media all and (max-width: 900px) and (orientation:landscape) {
#change-background-blue
{
margin-bottom: 20vh;
margin-right: 20px;
}
#change-background-orange
{
margin-bottom: 20vh;
margin-right: 20px;
}
}
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid black;
}
.button1:hover {
background-color: black;
color: white;
}
</style>
</head>
<body>
<div style="height:40vh;width:100vw;" class="orange" id="change-background-orange">
<div id="wir" style="opacity:0">
<p><span style="font-size:2.5em">Wir</span><br>
... mögen Herausforderungen, Effizienz, Ästethik und unkreative Aufzählungen.
<hr style="border-style: dashed; size: 5px;">
... sind ein eingespieltes, interdisziplinäres Team, das mittels spitzfindiger Kreativarbeit und wertschätzender Kommunikation einfach das tut was es liebt.
<hr style="border-style: dashed; size: 5px;">
... geben Innovationsfreiheit den Vorzug vor monetärem Gewinn, deshalb entscheidet ihr selbst, wie viel euch unser Beitrag wert ist.
</p>
</div>
</div>
<img id="logo" src="http://www.ideenschmelze.de/wp-content/uploads/2020/07/cropped-drip_drop_final_groß-1024x141.png" class="wp-image-124" id="logo" style="float:centre; width:100vw; height:20vh"/>
<div style="height:40vh;width:100vw;" class="blue" id="change-background-blue">
<div id="ihr" style="opacity:0">
<p><span style="font-size:2.5em">Ihr</span><br>
... benötigt ein Logo, Werbetexte,einen Slogan, Printmedien, CI oder eine komplette Marketingstrategie?<br>
... seid auf der Suche nach einem Ansprechpartner, der trotz beschränktem Werbebudget eueren Wunsch erfolgreich umsetzt? <br>
Dann schüttet uns euer Herz aus, schildert uns eure Probleme oder schwärmt von euren Visionen!
</p>
Send uns eine Email
</div>
</div>
<script>
var wir = document.getElementById("wir");
var ihr = document.getElementById("ihr");
document.getElementById("change-background-orange").addEventListener("mouseover", function() {
document.body.classList.remove("blue-theme");
document.body.classList.remove("default-theme");
document.body.classList.add("orange-theme");
wir.style.opacity = 1;
ihr.style.opacity = 0;
});
document.getElementById("change-background-blue").addEventListener("mouseover", function() {
//document.getElementById//("logo").src="newSource//.png";
document.body.classList.remove("orange-theme");
document.body.classList.remove("default-theme");
document.body.classList.add("blue-theme");
wir.style.opacity = 0;
ihr.style.opacity = 1;
});
document.getElementById("logo").addEventListener("mouseover", function() {
document.body.classList.remove("blue-theme");
document.body.classList.remove("orange-theme");
document.body.classList.add("default-theme");
wir.style.opacity = 0;
ihr.style.opacity = 0;
});
</script>
</body>
</html>
Thanks in advance
Tobias
Some of the div has too much height like 40vh it means viewport height so I turn it down a bit to 20vh. You should think of the browser's Bookmarks and menus also.
For your second item, the p element default has some margin so you have to override it.
Here you go:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
transition: background-color 0.5s ease;
}
.orange-theme {
background-color: #F08831;
}
.blue-theme {
background-color: #4FC1EC;
}
.default-theme {
background-color: white;
}
#media all and (max-width: 900px) and (orientation:landscape) {
#change-background-blue
{
margin-bottom: 20vh;
margin-right: 20px;
}
#change-background-orange
{
margin-bottom: 20vh;
margin-right: 20px;
}
}
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid black;
}
.button1:hover {
background-color: black;
color: white;
}
p {
margin-bottom: 0px !important;
}
</style>
</head>
<body>
<div style="height:40vh;width:100vw;" class="orange" id="change-background-orange">
<div id="wir" style="opacity:0">
<p><span style="font-size:2.5em">Wir</span><br>
... mögen Herausforderungen, Effizienz, Ästethik und unkreative Aufzählungen.
<hr style="border-style: dashed; size: 5px;">
... sind ein eingespieltes, interdisziplinäres Team, das mittels spitzfindiger Kreativarbeit und wertschätzender Kommunikation einfach das tut was es liebt.
<hr style="border-style: dashed; size: 5px;">
... geben Innovationsfreiheit den Vorzug vor monetärem Gewinn, deshalb entscheidet ihr selbst, wie viel euch unser Beitrag wert ist.
</p>
</div>
</div>
<img id="logo" src="http://www.ideenschmelze.de/wp-content/uploads/2020/07/cropped-drip_drop_final_groß-1024x141.png" class="wp-image-124" id="logo" style="float:centre; width:100vw; height:20vh"/>
<div style="height:20vh;width:100vw;" class="blue" id="change-background-blue">
<div id="ihr" style="opacity:0">
<p><span style="font-size:2.5em">Ihr</span><br>
... benötigt ein Logo, Werbetexte,einen Slogan, Printmedien, CI oder eine komplette Marketingstrategie?<br>
... seid auf der Suche nach einem Ansprechpartner, der trotz beschränktem Werbebudget eueren Wunsch erfolgreich umsetzt? <br>
Dann schüttet uns euer Herz aus, schildert uns eure Probleme oder schwärmt von euren Visionen!
</p>
Send uns eine Email
</div>
</div>
<script>
var wir = document.getElementById("wir");
var ihr = document.getElementById("ihr");
document.getElementById("change-background-orange").addEventListener("mouseover", function() {
document.body.classList.remove("blue-theme");
document.body.classList.remove("default-theme");
document.body.classList.add("orange-theme");
wir.style.opacity = 1;
ihr.style.opacity = 0;
});
document.getElementById("change-background-blue").addEventListener("mouseover", function() {
//document.getElementById//("logo").src="newSource//.png";
document.body.classList.remove("orange-theme");
document.body.classList.remove("default-theme");
document.body.classList.add("blue-theme");
wir.style.opacity = 0;
ihr.style.opacity = 1;
});
document.getElementById("logo").addEventListener("mouseover", function() {
document.body.classList.remove("blue-theme");
document.body.classList.remove("orange-theme");
document.body.classList.add("default-theme");
wir.style.opacity = 0;
ihr.style.opacity = 0;
});
</script>
</body>
</html>
You need a minor change here. Just add these lines of code. I know you didn't write this here. But try to implement them. As I find them on your website and from dev tools I tried to change them and they worked as you guys want. Just see the image. There is no scrollbar on the screen.
Problem:1-Solution
.col{
height:20px;
}
you have to make these changes here.
In you server location is this:
https://www.ideenschmelze.de/wp-content/themes/neve/style.min.css?ver=2.7.6
Problem:2 - Solution you have to remove the margin-bottom from the p tag which you will find at the same file in which you have to change .col property.
Just remove the margin-top property which was initially present here, I removed that from here.
And finally, your website is like as you want:
Related
I am trying to make the about section of my website appear in a different language when hovering. The code to make the translation appear when hovering over it works, however it makes the translated text appear below the original one (instead of at the same position) Can someone help me fix this? Cheers xx
This is the Code:
.aboutger {
opacity: 0;
}
.textabout {
text-align: center;
font-size: 25px;
position: relative;
top: 140px;
width: 1500px;
font-family: "Druk Wide Web Medium Regular";
color: floralwhite;
-webkit-text-stroke: 1px black;
}
.abouteng,
.aboutger {
transition: opacity 1s;
}
.textabout:hover .abouteng {
opacity: 0;
}
.textabout:hover .aboutger {
opacity: 1;
}
<div class="textabout">
<p><span class="abouteng">Luca is one of the most promising talents rising from a new generation of Berlin-bred artists.
<br> <br> Being classically trained since his early childhood, he started writing and producing electronic pop music at the age of 11, later transitioning into techno in 2017.</span></p>
<p><span class="aboutger">Luca zaehlt zu den vielversprechendsten aufstrebenden Talenten der Berliner Technoszene.
<br> <br>
Nachdem er als Kind klassisch Kontrabass und Klavier lernte, begann er sich im Alter von 11 Jahren sich mit der Produktion elektronischer Popmusik auseinander zu setzen, bis er 2017 zu Techno ueberging. </span></p>
</div>
Opacity will only work on the visibility of an element on not on its positioning. Either display: none or absolute positioning would be required to make the text appear in the same positions.
.aboutger {
display: none;
}
.textabout {
text-align: center;
font-size: 25px;
position: relative;
top: 140px;
width: 1500px;
font-family: "Druk Wide Web Medium Regular";
color: floralwhite;
-webkit-text-stroke: 1px black;
}
.abouteng,
.aboutger {
transition: opacity 1s;
}
.textabout:hover .abouteng {
display: none;
transition: opacity 2s;
}
.textabout:hover .aboutger {
display: block;
transition: opacity 2s;
}
<div class="textabout">
<p><span class="abouteng">Luca is one of the most promising talents rising from a new generation of Berlin-bred artists.
<br> <br> Being classically trained since his early childhood, he started writing and producing electronic pop music at the age of 11, later transitioning into techno in 2017.</span></p>
<p><span class="aboutger">Luca zaehlt zu den vielversprechendsten aufstrebenden Talenten der Berliner Technoszene.
<br> <br>
Nachdem er als Kind klassisch Kontrabass und Klavier lernte, begann er sich im Alter von 11 Jahren sich mit der Produktion elektronischer Popmusik auseinander zu setzen, bis er 2017 zu Techno ueberging. </span></p>
</div>
I have a small issue with my babylonjs scene. When I click a mesh in the scene a border appears (in my browser the border is blue but it differs depending on the browser):
in google chrome
a friends browser
this is the html/css code of my component (I use vuejs):
<template>
<div class="wrapper">
<div class="Rahmen">
<div id="textblock">
<h1 id="welcome">Willkommen</h1>
<h4 id="welcome-text">
Planen Sie mit unserem Konfigurator einfach und
schnell Ihre individuelle Containertreppenlösung
</h4>
<br />
<br />
<span>So klappt's</span>
<b-button pill id="popover-help-button"><v-icon id="popover-help" name="question-circle" /></b-button>
<b-popover ref="popover"
target="popover-help-button"
triggers="hover"
placement="top">
Wählen Sie bitte aus wie viele Container sich in Ihrer Containeranlage in Höhe und Breite befinden.
<img src="#/assets/helpp1.gif" width="440" />
</b-popover>
</div>
<canvas id="renderCanvas"></canvas> <!-- babylon scene-->
</div>
</div>
</template>
<style>
#renderCanvas {
width: 100%;
height: 100%;
overflow: hidden;
}
.wrapper {
position: center;
}
.Rahmen {
padding-top: 7%;
margin: 0;
min-height: 600px;
}
#textblock {
padding-left: 7%;
position: center;
background-color: white;
margin-bottom: 2%;
}
#popover-help {
color: blue;
}
#popover-help-button {
background: transparent;
border: transparent;
left: 0%;
margin-left: 0%;
margin-top: 0.5%;
}
.popover {
max-width: 450px;
}
</style>
any suggestions?
Here is an example.It caused by tab-index.
https://forum.babylonjs.com/t/remove-border-of-rendering-canvas/16074
Would an extra CSS line like outline:none; help you out?
I started to learn HTML and CSS a few days ago and now got a problem:
#referenzen{
width: 100%;
padding: 25px;
}
#referenzen h1, h2, h3, h4, h5, h6{
margin-bottom: 0;
}
#referenzen p{
padding-right: 25px;
font-size: 18px;
}
#referenzen img{
height: 50px;
width: 50px;
float: left;
}
<div id="wrapper">
<div id="referenzen">
<img src="../Bilder/info.png">
<h1>Unsere Firmengeschichte</h1>
<br>
<p>Die Firma Fair-Bau GmbH wurde im April 2010 gegründet und betätigt sich in den Sparten ausführende Baumeisterarbeiten, Vollwärmeschutzarbeiten, Verputzarbeiten sowie dem Handel mit Baustoffen.
Der Betrieb beschäftigt 15- 20 Mitarbeiter. </p>
</div>
How can i directly assign the image to the tag so that its directly next to it?
The page at it´s current state: http://imgur.com/a/IprOF
Thanks in advance!
There are two ways I would do it:
In HTML: You could insert the <img>-tag inside you <h1></h1>-tag
in CSS: You could set h1 and img to display: inline-block
I'd prefer the first one.
EDIT for better understanding:
The tags <h1>...<h6> have a default display of block which means they take a total of 100% width of the parent container.
So changing it to inline-block destroys the 100% width and shrinks it down to either a set width-value or if that isn't set to the size of the contained elements.
You could just margin-top: 15px to the image.
#referenzen {
width: 100%;
padding: 25px;
}
#referenzen h1,
h2,
h3,
h4,
h5,
h6 {
margin-bottom: 0;
}
#referenzen p {
padding-right: 25px;
font-size: 18px;
}
#referenzen img {
height: 50px;
width: 50px;
float: left;
margin-top: 15px;
}
<div id="wrapper">
<div id="referenzen">
<img src="http://vignette2.wikia.nocookie.net/dccu/images/b/bc/Icon-Wikipedia.png/revision/latest?cb=20160324075444">
<h1>Unsere Firmengeschichte</h1>
<br>
<p>Die Firma Fair-Bau GmbH wurde im April 2010 gegründet und betätigt sich in den Sparten ausführende Baumeisterarbeiten, Vollwärmeschutzarbeiten, Verputzarbeiten sowie dem Handel mit Baustoffen. Der Betrieb beschäftigt 15- 20 Mitarbeiter.</p>
</div>
i have a design in mind that would line up a picture of a recipe next to a description text (and link) in a row inside of another bigger div. (named col2) right now the image is beneath the description not on the right of it, were i would like to have it. thanks.
.col2{width:60%;
background-color: #FFD6AD;
border-radius:25px
color:#993D00;
padding: 10px;}
font-size: 18px;}
.col2 a {text-decoration:none;
color: #993D00;
font-weight: bold;
font-size:20px;}
.col2 p { max-width:500px;}
.thumb {max-width: 400px;}
.recipe {max-width: 60%;
display: -moz-inline-stack;
display: inline-block;}
with the HTML
<div class="col2">
<div "info"> Leckeres essen für wehnig Geld. Es gibt viele Gerichte die
ziemlich günstig sind und trozdem schmecken. </div>
<div class="recipe">
<div>
Chillie aus getrockneten Bohnen
<p>Chillie sin carne, oder vegitarisches Chillie .....) </p>
</div>
<div class="thumb"> <img src="img/sm-chilly.jpg" alt="chilli sin carne">
</div>
</div>
A general solution would be to float the image to the right, and limit its width using a %. Online Demo.
<div class="col2">
<div class="thumb">
<img src="img/sm-chilly.jpg" alt="chilli sin carne">
</div>
<div "info">Leckeres essen für wehnig Geld. Es gibt viele Gerichte die ziemlich günstig sind und trozdem schmecken.</div>
<div class="recipe">
<div> Chillie aus getrockneten Bohnen
<p>Chillie sin carne, oder vegitarisches Chillie .....)</p>
</div>
</div>
<div class="clear"></div>
</div>
With CSS:
.col2 {
width:60%;
background-color: #FFD6AD;
border-radius:25px color:#993D00;
padding: 10px;
}
font-size: 18px;
}
.col2 a {
text-decoration:none;
color: #993D00;
font-weight: bold;
font-size:20px;
}
.col2 p {
max-width:500px;
}
.thumb {
float: right;
max-width: 40%;
}
.thumb img {
max-width: 100%;
}
.recipe {
max-width: 60%;
}
.clear {
clear: both;
}
consider adding the image before the text and align it to the left
use span if instead of div if you don't want it to go on a new line
example
<div class="recipe">
<span class="thumb"> <img src="img/sm-chilly.jpg" align=left alt="chilli sin carne">
</span>
<span>
<p> Chillie aus getrockneten Bohnen
Chillie sin carne, oder vegitarisches Chillie .....) </p>
</span>
I'm trying to mix "traditional" float usage for floating text around element with some adataptiveness for different resolutions. Fiddle: http://jsfiddle.net/jDTBs/5/
<article>
<header>
<div class="cover">...image...</div>
<h1>title</h1>
</header>
<div class="row">
<div class="text">some long text</div>
<section class="related">related content</section>
</div>
</article>
Responsiveness here comes in flavour of moving related content below the text. Currently .related cannot move higher than end of .text, because .text is in normal flow. I tried to use relative positioning on float, but I don't know the height to offset it, so -100% does not work.
Common approach is to use float on .text, but it interferes with text floating around .cover. I also tried moving related content above text, but then in smaller window it comes before text, which is undesirable. Also, any kind of interference with overflow or display properties in .text make text block jump away from floating .cover.
The closest I could get to is to use position: absolute on .related with right:0px;top:0px. This gives the positioning I want, but produces a CSS-unsolvable problem: related content will go below end of article.
So I'm stuck. Is there any way to mix the two approaches? Highest CSS support and any changes to layout are acceptable. Bootstrap CSS is also available, but does not help a tiny bit.
Thsi is something I'd like to achieve:
Here's an example of how the HTML and CSS could be changed to yield a beautifully responsive layout. I've added more paragraphs to the HTML so that it's easy to see that the amount of text does not affect the image position. Perhaps the biggest caveat here is that figcaption is rendered really strangely in relation to figure (I'm guessing that has something to do with the standard's definition of the default stylesheet for those elements), so unless this possibly changes in the future, you'll need to specify enough margin underneath the figure to encompass the caption.
http://jsfiddle.net/jjordanca/jDTBs/10/
HTML:
<article>
<figure class="cover">
<img src="" alt="" />
<time datetime="2013-08">Aug 2013</time>
</figure>
<header>
<h1>Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche</h1>
</header>
<div class="row">
<figure class="related">
<img src="" alt="" />
<figcaption>Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.</figcaption>
</figure>
<div class="text">
<p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p>
<p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p>
<p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p>
<p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p>
</div>
</div>
</article>
CSS:
* {padding: 0; margin: 0;}
article {
position: relative;
}
img {
border: 1px solid black;
}
.cover {
width: 80px;
text-align: center;
font-size: 0.8em;
display: inline-block;
float: left;
margin: 0 20px 10px 0;
}
time {
display: inline-block;
width: 80px;
text-align: center;
}
header {
margin: 20px 0 0 0;
}
h1 {
position: relative;
padding-left: 10px;
font-size: 1.6em;
}
.cover img {
width: 80px;
height: 120px;
}
.row {
display: inline;
position: relative;
}
.text {
display: inline;
position: relative;
font-size: smaller;
}
.related {
display: inline-block;
width: 200px;
font-size: 0.8em;
height: 100px;
float: right;
margin: 25px 0 50px 20px;
}
.figcaption {
display: inline-block;
float: right;
}
.related img {
width: 200px;
height: 100px;
}
* {
border: 1px dotted #ccc
}
<article>
<header>
<div class="cover">...image...</div>
<h1>title</h1>
</header>
<div style="clear:both"></div>
<div class="row">
<div style="float:left" class="text">some long text</div>
<section class="related">related content</section>
</div>
<div style="clear:both"></div>
</article>
Here you go:
http://jsfiddle.net/jjordanca/jDTBs/8/
Keep in mind that this will look okay on Chrome, but not in Firefox since the img elements will require display: block; in the CSS. Some minor other adjustments may need to be made.
HTML:
<article>
<header>
<div class="cover">
<img src="" alt="" />
<time datetime="2013-08">Aug 2013</time>
</div>
<h1>Wo bewirtung zerfasert so kraftiger handwerke ri la kindliche</h1>
</header>
<div class="row">
<div class="text">
<p>Was mehrere fur niemals wie zum einfand wachter. Wu gewohnt langsam zu nustern dankbar. Messer all erzahl las zopfen darauf. Oden sie denn froh ohne dus. Schlafer hin ansprach geworden gelernte lauschte zugvogel mir das. Ist hochmut gebogen wendete das zweimal. Hoffnungen augenblick vertreiben es da wo zueinander kindlichen. Weg uns sohn hoch bei flu eins.</p>
<p>Ei ku jawohl en mi fertig hangen konnen gesagt. Dazwischen nachmittag ein eigentlich ist sog tat. Was dazwischen launischen das vorsichtig verrichtet eigentlich wie ein. Wahres gerber gro ehe tal kannst. Naturlich in da nachgehen schwachem gegriffen ja. Gearbeitet bugeleisen birkendose neidgefuhl die das dienstmagd.</p>
</div>
<section class="related">
<figure>
<img src="" alt="" />
<figcaption>Empor hosen ich nur funfe szene seine. Wo ri so stuckchen kammertur pa bekummert schranken hemdarmel.</figcaption>
</figure>
</section>
</div>
</article>
CSS:
article {
position: relative;
max-width: 480px;
}
figure {
margin: 0em
}
img {
border: 1px solid
}
.cover {
width: 80px;
text-align: center;
font-size: 0.8em;
}
.cover {
display: inline-block;
margin: 0em 2em 1em 0em;
}
time {
display: inline-block;
width: 80px;
text-align: center;
}
header {
display: inline-block;
width: 100px;
float: left;
}
h1 {
position: relative;
width: 550px;
margin-top: -180px;
top: 50px;
margin-left: 90px;
padding-left: 10px;
font-size: 1.6em;
}
.cover img {
width: 80px;
height: 120px;
}
.row {
display: inline;
position: relative;
top: 110px;
}
.text {
display: inline;
position: relative;
font-size: smaller;
}
.related {
width: 200px;
font-size: 0.8em;
height: 100px;
float: right;
position: relative;
left: 220px;
top: -200px;
}
.related img {
width: 200px;
height: 100px;
}
* {
border: 1px dotted #ccc
}
The problem with the way the HTML is structured is that this design is extremely limited in its responsiveness. If you are able to change the HTML, the page can be made truly responsive.