Is it possible that I still can have the header all on one line, and not two like this?
.
I just prefer this one…
But if that causes problems, then I’ll just go with the first 
Still trying to center it. can’t do without the margin:, but then it would go back to what I had before :
nav ol {
list-style: none;
line-height:0em;
padding: 0.531em;
padding-left:0.563em;
padding-right:0.563em;
margin: 0 3.1em; /* play with this for mobile */
display: flex;
flex-wrap:wrap;
justify-content: space-between;
width:100vw;
height: auto;
background: rgba(0, 0, 0, 0.3);
}
And you’re saying to not have both, margin and width.
Start from the top and work down.
html, body {
margin-left: -2em;
margin-right: auto;
padding: 0;
font-family: sans-serif;
}
The first rule for your page and you have shifted the html element 2em to the left and the body also 2 em to the left which means before you even start putting content into your page you have dragged the whole page 4em (64px approx) off the left side of the viewport. Your whole page is skewed before you even start putting content into it!
Then because you have created this offset you give the header a margin-left of 16% so that it doesn’t hide off screen. You also give the header 100% width so no the page is 116% wide and too big to fit in any container or screen without causing a scroll. You have destroyed any natural alignment in one fell swoop.
You then once again give a 100vw width and massive margins to your columns.
.columns {
flex-direction: column;
margin: 0 7.40em;
width: 100vw;
}
That makes that element 14.8em too wide for any container and will cause a scrollbar.
If you give a background color to .myWrapper for testing you will see that the whole page does not fit in that wrapper and yet it is supposed to be holding all the content.
All the space to the right of the red background is overflow where your content does not fit. You need to make sure that all your content fits inside its container without a scrollbar appearing or content sticking out.
Another one here with 100vw width and margins.
.tagline {
margin: 0 1em;
width: 100%;
padding: 0.2em 0em;
}
If I tweak just a couple of things and remove those silly widths and margins and set a max-width of 100% on some of your images the whole thing starts to slot into place.
As you can see all content is now inside that temporary red background.
You just have to think logically about what you are doing. You can’t put something bigger on the inside.
5 Likes
" on some of your images "
Are you referring to the inline images that have the borders?
Any images that stick out when space is less than the size of the image.
You have some images at 400px fixed width but 99% of phones are 375px or smaller
1 Like
Ok so the ones that are at 400px.
Just went through and removed the widths and margins where they were. I now have this :
.tagline {
padding:0.2em 0em;
}
.header {
text-align: center;
color: #000000;
font-family: StreetScript Redux, Arial, Freestyle Script;
font-weight: bold;
margin: 0;
padding-top: 2rem;
}
html,
body {
margin: 0;
padding: 0;
font-family: sans-serif;
}
body {
padding: 10px;
}
.columns {
flex-direction: column;
}
I’m not seeing any image showing 400px. Where they at?
Your images are still too wide as seen here.
Add max-width:100% and height:auto to those images.
The right column is also still too wide for the wrapper as you can see from the overlap. I’ve coloured the right column red so you can see its too big for the wrapper
.
Remove the width, height and margin from this one.
#monthlyevents-wrapper {
width: 20.625em;
height: 20.625em;
margin: 3em 2em;
}
Remove the margin top and width from this one:
#htmltagcloud {
margin: -87em auto 0 auto;
padding: 2em;
padding-top: 250px;
background: rgba(0,0,0,1);
width: 350px;
font-size: 8px;
font-family: Fertigo Pro, Karla, Arial, Verdana;
z-index: 9999;
}
Remove the top and bottom margin from this one:
.currentevents {
width: 20.625em;
height: 20.625em;
margin: -18em auto;
border: none;
background-repeat: no-repeat;
background-size: 25% 85%;
z-index: 9999;
box-shadow: none;
}
It will then look roughly like this.
As you can see the red is now contained inside the parent green wrapper.
You will then need to sort out the flower and tagcloud as I assume those elements should be in the tagcloud wrapper rather than dragging everything up and down with margins. There’s also an svg mixed in that region.
You should be able to get rid of all those large top and bottom margins. When you need to absolutely position something on top of something else then make sure those elements are in the same stacking context and controlled properly.
3 Likes
So, make this :
#monthlyevents-wrapper {
width: 20.625em;
height: 20.625em;
margin: 3em 2em;
}
As
#monthlyevents-wrapper {
width: 0;
height: 0;
margin: 0;
}
Or just remove that CSS?
Nevermind, just done the above for #monthlyevents-wrapper, and is looking better now.
And here it is
Just like yours. Will sort out #flower. I think there’s no wrapper for that, so will add one.
1 Like
Does this make sense?
Not much!
It’s a blank pen.
@PaulOB 
. Oh! Sorry bout that! I’ll see what I can do. I thought I had saved it.
Ok how about this one?
Here’s everything in a nutshell for the #tagcloud and #flower. I have put the flower in the tagcloud wrapper, so all can be moved at once. Or still individually, while within the wrapper if needed.
#flower{
z-index:9999;
position: relative;
top:-6em;
left:-0.7em;
width: 12em;
height: 12em;
padding-top: 16.25em;
margin: 9em auto;
border: none;
background-image: url(https://i.ibb.co/CHHMHrR/pink-cherry-blossom-on-black-260nw-48419839.jpg);
background-repeat:no-repeat;
background-size: 100% auto;
}
#ripples {
z-index:9999;
position: absolute;
width: 11.5em;
height: 4em;
top: 6em;
left: -1.5em;
background-image: url(https://i.ibb.co/BBqP9YX/pink-cherry-blossom-on-black-bottom.jpg);
background-size: 132% auto;
background-position: 0 -9.75em;
filter: url(#turbulence);
}
@media ( max-width:25em ) {
#flower{
width: 12em;
padding-top: 12.38em;
margin: 6em auto;
border: none;
}
}
#tagcloudwrap {
background:gold;
padding:0.5em;
margin:21em auto;
}
#htmltagcloud{
/******************************************
* CUSTOMIZE CLOUD CSS BELOW (optional)
*/
margin:0 auto 0 auto;
padding:2em;
padding-top:250px;
background:rgba(0,0,0,1);
font-size:8px;
font-family:Fertigo Pro, Karla, Arial, Verdana;
z-index:9999;
/******************************************
* END CUSTOMIZE
*/
}
<div id="tagcloudwrap">
<div id="flowerwrap">
<div id="flower">
<div id="ripples"></div>
</div>
</div>
<svg>
<filter id="turbulence">
<feTurbulence id="sea-filter"
numOctaves="3"
seed="2"
baseFrequency="0.02 0.05"/>
<feDisplacementMap
scale="10"
in="SourceGraphic"
in2=""/>
<animate
xlink:href="#sea-filter"
attributeName="baseFrequency"
dur="8s"
keyTimes="0;0.5;1"
values="0.02 0.06;0.04 0.08;0.02 0.06"
repeatCount="indefinite">
</animate>
</filter>
</svg>
<div id="htmltagcloud"> <span id="0" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">add</a></span> <span id="1" class="wrd tagcloud0"><a class="wordtag" href="https://iwriteonwheels.tumblr.com/Anime" style="color:#fff; background:none;">anime</a></span> <span id="2" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:orange; background:none;">anyways</a></span> <span id="3" class="wrd tagcloud10"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">app</a></span> <span id="4" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:orange; background:none;">archive</a></span> <span id="5" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">around</a></span> <span id="6" class="wrd tagcloud10"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">blog</a></span> <span id="7" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud"style="color:orange; background:none;">change</a></span> <span id="8" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">code</a></span> <span id="9" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">cool</a></span> <span id="10" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:#000; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">count</a></span> <span id="11" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">decided</a></span> <span id="12" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud"style="color:#fff; background:none;">delivering</a></span> <span id="13" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">embed</a></span> <span id="14" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">explore</a></span> <span id="15" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:#000; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">facebook</a></span> <span id="16" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">feats</a></span> <span id="17" class="wrd tagcloud10"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">feed</a></span> <span id="18" class="wrd tagcloud6"><a class="wordtag" href="https://feedburner.google.com/fb/a/myfeeds?pli=1" style="color:#fff; background:none;">feedburner</a></span> <span id="19" class="wrd tagcloud10"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">https</a></span> <span id="20" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">liked</a></span> <span id="21" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:#000; background:none; text-shadow:0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff, 0px 0px 1px #fff, 6px 0px 12px #fff, -6px 0px 12px #fff;">mail</a></span> <span id="22" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:orange; background:none;">mystery</a></span> <span id="23" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">open</a></span> <span id="24" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">perfect</a></span> <span id="25" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">permalink</a></span> <span id="26" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">playing</a></span> <span id="27" class="wrd tagcloud10"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">posts</a></span> <span id="28" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">ratings</a></span> <span id="29" class="wrd tagcloud6"><a class="wordtag" class="wordtag" href="#tagcloud" style="color:orange; background:none;">read</a></span> <span id="30" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">reddit</a></span> <span id="31" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">replaced</a></span> <span id="32" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">seems</a></span> <span id="33" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:orange; background:none;">sep</a></span> <span id="34" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:#000; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">seriously</a></span> <span id="35" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">shows</a></span> <span id="36" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">slow</a></span> <span id="37" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">solution</a></span> <span id="38" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">something</a></span> <span id="39" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">sounds</a></span> <span id="40" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">testing</a></span> <span id="41" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:#000; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">theme</a></span> <span id="42" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">tried</a></span> <span id="43" class="wrd tagcloud10"><a class="wordtag" href="https://www.tumblr.com/dashboard" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">tumblr</a></span> <span id="44" class="wrd tagcloud6"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">tweet</a></span> <span id="45" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">used</a></span> <span id="46" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#000; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">visited</a></span> <span id="47" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">wahhhh</a></span> <span id="48" class="wrd tagcloud0"><a class="wordtag" href="#tagcloud" style="color:#fff; background:none;">wanna</a></span> <span id="49" class="wrd tagcloud10"><a class="wordtag" href="#tagcloud" style="color:darkred; background:none; text-shadow:0px 0px 1px brown, 0px 0px 1px white, 0px 0px 1px white, 0px 0px 1px white, 6px 0px 12px #fff, -6px 0px 12px #fff;">work</a></span></div>
<div id="credit" style="position:relative; top:0px; left:-105px; text-shadow:0px 2px 1px black; z-index:9999; color:#fce5cd;">created at <a class="wordtag" href="https://tagcrowd.com" style="position:relative; top:0px; left:0px; background:none; color:orange; text-shadow:0px 2px 1px black; z-index:9999;">TagCrowd.com</a></div><!-- end tag cloud : generated by TagCrowd.com : please keep this notice -->
</div>
Forgot screen shot
That’s the wrapper. But where I have <svg>, It shows up on devtools, and shows that it’s within the wrapper. Of course, cause I put #flower in that, but now thinking maybe I should leave out the <svg> from wrapper.
Well I gave it a class and put it where #flower is. Not sure if I even need it though.
.waveripple {
border:1px solid blue;
position:relative;
top:12em;
left:4em;
width: 12em;
height: 12em;
}