I am working on a blog for a client. The header at the very top has an HTML comment in it that I can't figure out how to get rid of.
Here is the URL: http://www.erinkathleendunn.com/
Here is the source code around the area:
<![CDATA[
body {
min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
min-width: $(content.width);
max-width: $(content.width);
_width: $(content.width);
}
.main-inner .columns {
padding-left: $(main.column.left.width);
padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
width: $(main.column.right.width);
margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
}
]]>
</b:template-skin>
</head>
<body expr:class='"loading" + data:blog.mobileClass'>
<div class='body-fauxcolumns'>
<div class='fauxcolumn-outer body-fauxcolumn-outer'>
<div class='cap-top'>
<div class='cap-left'/>
<div class='cap-right'/>
</div>
I can see --> at the top of the blog. Is that what you want to remove ?
If yes, then Open your source code and search for --> for in you HTML and remove that.
This will work.
The problem lies in between the code of the "Mobile stylesheet". This is the portion of your code that is causing the problem:
.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
border-left: 1px solid #dddddd;
}
</style>
--></style> (Remove this)
<style id='template-skin-1' type='text/css'><!--
This is on line 471 of the page. Also, you're closing the style tag 2 times here. The code is a bit messy. Try validating via http://validator.w3.org if you want to improve it overall.
Related
I am very new to css. I have a flow of pictures which I preload in js to determine if they are portraits or landscapes. Then I want to return a div according to that. My css looks like that
.image-wrapper-landscape {
width: 100%;
height: 100%;
display: inline-block;
position: relative;
margin: 5px 0;
&:hover {
.text-wrapper {
opacity: 1;
}
}
}
.image-wrapper-portrait {
width : 49.5%;
display: inline-block;
position: relative;
margin: 5px 0;
&:hover {
.text-wrapper {
opacity: 1;
}
}
}
Then my divs are
<div
className='image-wrapper-portrait'
key={i}
>
<img src={image.src} alt={altText} data-position={image.position} />
</div>
<div
className='image-wrapper-landscape'
key={i}
>
<img src={image.src} alt={altText} data-position={image.position} />
</div>
This doesn't seem to work though since the portrait pictures all look different. What I would like to do is resize all of them so that I end up with a flow of either landscapes or portraits, I also tried pixels instead of percentages but still nothing. I would appreciate nay help, css confuses me.
I think it's working for you, try making the img width 100%;
But while using scss try to make it useful.
.scss
.image-wrapper {
display: inline-block;
position: relative;
margin: 5px 0;
&.portrait {
width: 100%;
height: 100%;
}
&.landscape {
width : 49.5%;
}
&:hover {
.text-wrapper {
opacity: 1;
}
}
img {
width: 100%;
}
}
use class name image-wrapper portrait for portrait and use image-wrapper landscape.
And use object-fit if you wants to.
I've read so many answers to this question but still can't figure out how to stop elements of my blog moving when a browser is resized. I just got a new template and didn't have this problem with my last one.
My site is: shannondarko.co.uk
I'm not sure what section of code to provide you with but I think it might be this part?
<b:template-skin>
<b:variable default='960px' name='content.width' type='length' value='1500px'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length' value='240px'/>
<![CDATA[
body {
--min-width: $(content.width);
}
.content-outer, .content-fauxcolumn-outer, .region-inner {
--min-width: $(content.width);
max-width: 100%;
_width: $(content.width);
}
.main-inner .columns {
--padding-left: $(main.column.left.width);
--padding-right: $(main.column.right.width);
}
.main-inner .fauxcolumn-center-outer {
left: $(main.column.left.width);
--right: $(main.column.right.width);
/* IE6 does not respect left and right together */
_width: expression(this.parentNode.offsetWidth -
parseInt("$(main.column.left.width)") -
parseInt("$(main.column.right.width)") + 'px');
}
.main-inner .fauxcolumn-left-outer {
width: $(main.column.left.width);
}
.main-inner .fauxcolumn-right-outer {
--width: $(main.column.right.width);
}
.main-inner .column-left-outer {
width: $(main.column.left.width);
right: 100%;
margin-left: -$(main.column.left.width);
}
.main-inner .column-right-outer {
--width: $(main.column.right.width);
--margin-right: -$(main.column.right.width);
}
#layout {
min-width: 0;
}
#layout .content-outer {
min-width: 0;
width: 800px;
}
#layout .region-inner {
min-width: 0;
width: auto;
</b:template-skin>
Thanks in advance if you can help!
I'm attempting to push my Bootstrap Carousel controls outside of the image but I seem to be having some problems. I've been able to get them out of the image by setting width: 0%; on .carousel-controls but the problem is it's not completely responsive and it seems that the left control is closer to the image compared to the right control.
What would be the correct way to do this? I feel like I'm going down the wrong path.
#myCarousel {
margin-left: 30px;
margin-right: 30px;
}
.item img {
margin-left: auto;
margin-right: auto;
}
.selected img {
opacity:0.5;
}
.carousel-caption {
position: relative;
left: auto;
right: auto;
}
.carousel-control.left,
.carousel-control.right {
background: none;
border: none;
}
.carousel-control.left {
margin-left: -45px;
}
.carousel-control.right {
margin-right: -45px;
}
.carousel-control {
width: 0%;
}
.glyphicon-chevron-left, .glyphicon-chevron-right {
color: grey;
font-size: 40px;
}
Here's a JSFiddle: https://jsfiddle.net/guhx5sjL/1/
Is this what you are looking for? If so its just some quick changes in your CSS:
#myCarousel {
margin-left: 50px;
margin-right: 50px;
}
.carousel-control.left {
margin-left: -25px;
}
.carousel-control.right {
margin-right: -25px;
}
I updated your js.fiddle here.
It will make your page scroll horizontally. You'd better add .col-10 .mx-auto to .carousel-inner. Always remember to check side effects of your additional pure css on bootstrap modules.
I have been created simple webpage using html5,css and js.
I have header,menu,slide show,main-content and footer. and also using sticky side-bar
After all coding, slideshow display at the middle of main content and main-content also hidden.
css code for slideshow,main-content and footer:
#wowslider-container1 {
position: absolute !important;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 60%;
opacity: 1;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* Main ................ */
main {
margin: 20px auto;
max-width: 940px;
}
/* aside */
aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #000;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
/* main content */
.main_content {
float: right;
max-width: 700px;
color:#fff;
}
/* Footer .............. */
footer {
background-color: #999;
height: 300px;
width: 100%;
}
My page look like this: http://s14.postimg.org/jw2uimt9t/Untitled_1_copy.png
I have lots of file, how to fix my problem, there anyone help me to fix this.
Any help would be highly appreciated. Thanks in advance.
I guess i understood what you need,
most of the div containers that you use don't have css size properties like width and height, but most importantly they don't have a position values in order to fit a html layout structure.
try using position:relative; first on the css for the most important elements of the page.
start first with this default css parameters:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
then add to your slideshow css main class this
*your_slideshow_class_name_here {
position: relative;
}
after that, things become easier to solve
http://jsfiddle.net/VjMy8/
Please help me to set the #container to keep in the center of the page so that all other contents under the #container will be on center.
in css:
#container {
width: xxx em/px/%/...;
margin-left: auto;
margin-right: auto;
/* or margin: 0 auto; */
}
With this method you won't even need a container, you can do something like this the code below.
This code doesn't need a float, so it doesn't interrupt the flow of a page
#div_left {
width: 25%;
margin-left: 12%;
}
#div_right {
width: 50%;
margin-left: 38%;
}
This method works in every browser in is much easyer then this (older & longer) method:
body {
text-algin: center;
}
#container {
width: xxx;
text-align: center;
}
#div_left {
width: 30%; /* 30% of the container-width */
}
#div_right {
width: 70%;
}
just remove the float left -- here's the fiddle http://jsfiddle.net/mvivekc/VjMy8/3/