When I go to bottom of my website, I can't go back to top with the scrollbar. What might be the problem?
and I also have some errors on the browser console.
#wise-ticker .owl-controls,
#wise-ticker .owl-item {
padding-top: 10px;
}
.wise-ticker-title {
float: left;
display: block;
padding-left: 20px;
}
http://londonpostjournal.com/
Apply this code in your general stylesheet
html {
overflow-y: scroll;
}
Hope this will works for you.
Related
My logo is overlapping my menu bar I just went to space it from overlapping
I tried changing the code but I'm a novelist so I really don't know what works I know about HTML but it's not the same.
.navbar-nav > li > a {
font-size: 20px;
}
.nav { right: 10px; }
Whenever I change the code it messes up the font size and it still over lamps
Here is the website:http://143wear.com
As you are using WordPress, through Admin dashboard you can set the max-width: 146px; to Logo,
Else you can use the following code into CSS,
By using this code there will be least chances for responsiveness issues,
In case you need bigger logo, you have to customize the code.
.site-header .logo img {
max-width: 146px;
}
.container {
width: 100%;
}
.header-logo {
width: auto;
}
.header-right {
width: auto;
}
.row {
margin-right: -15px;
margin-left: -15px;
justify-content: space-between;
}
Would be a working solution (might need some improvements for responsibility)
I recently added a widget to my website header for desktop mode. I struggled getting this widget to be on the same line and off to the right of the logo, but I eventually got it. In the process, it appears I messed up how the header looks on mobile devices (refer to twoguysplayingzelda.com for an example). Since 65% of my viewership is via mobile, I would like to fix this but have not figured out how. I would like the logo to be centered, completely view-able, and the menu icon on the left side (it use to be before I made the change). I am aware that I need to add coding into the responsive section of my style.css. Below is what I currently have for my header in CSS (desktop section). I knew nothing about CSS and HTML before I started my website, so I am still somewhat of a noob. Thanks for your help
div#header-widget-area {
float: right;
}
.header {
padding-top: 10px;
padding-bottom: 60px;
color: #01B3D9;
}
.header .cover {
background: rgba(29,29,29,0.0);
}
.header-inner {
position: relative;
}
.header .blog-logo {
text-align: left;
}
.header .logo {
display: inline;
float: left;
}
.header .logo img {
max-height: 50px;
width:auto;
}
The menu icon is pushed to the right by the logo because they both have float: left.
Try to remove float: left from .logo, and add display: inline-block to .blog-logo. That should fix both of your issues.
Basically this is one question but might need a multi part answer to remove the excess spacing. Basically the problem occurs when setting the featured image on a post on the default twentysixteen theme. I have a live test environment setup to show this here: http://192.241.239.174/index.php/2016/11/02/hello-world/
Here is a shot of how it currently is vs what I'm expecting it to look like: http://prntscr.com/d204p5
Thank you for any help
Edit: Further researching similar questions I have gotten slightly closer by using some custom css to change the thumbnail/featured image max width to 150 which should be fine as all my featured images are going to be 150x150 anyways. This code was added into custom css:
.post-thumbnail img {
float: left;
margin: 5px 15px 10px 0;
max-width: 150px;
}
Now the text does appear slightly higher but still fails to wrap the thumbnail and is still not close enough to the thumbnail. I'd like to have the text closer to the thumbnail
EDIT: Complete solution
The complete solution I used was adding this code into my custom css:
.entry-footer {
display: none;
}
.post-thumbnail img {
float: left;
margin: 0px 20px 0px 0;
max-width: 150px;
}
body:not(.search-results) article:not(.type-page) .entry-content {
float: none !important;
width: 100%;
}
.entry-content > :last-child {
margin-bottom: 0;
text-align: center;
width:100%;
}
i don't think that's the better choice to make in fact i would have setup a child theme and worked on it, by the way:
.entry-footer {
display: none;
}
.post-thumbnail img {
float: left;
margin: 0px 20px 0px 0;
max-width: 150px;
}
body:not(.search-results) article:not(.type-page) .entry-content {
float: none !important;
width: 100% !important;
}
.entry-content > :last-child {
margin-bottom: 0;
text-align: center;
}
You may need to add !important keyword if something doesn't work.
The result: Is that like what you wanted?
I am trying to get my basic webpage layout together and I hit a few problems. Could someone please help me solve it. My understanding of CSS is not superb.
Code: http://jsfiddle.net/HJLzt/
The sticky footer is working, and I want to have a column left and right of the page in between header and footer. I'm not sure if the way I did it is correct.
Between left and right column and header and footer I would like to put the content. How do I center it. I cannot find a proper way, as there is always overflow and I want it only to go between the left and right column and nothing to cut off.
Thank you for your help!
EDIT:
I have updated my layout and used a bit of jquery to help out. I know I should try and make everything work in css, but it seems impossible.
Maybe I should add, that I want a whiteboard as theme. I want a wooden frame, so the sidebars always have to connect to the header and footer, as the top and bottom frames go through there.
If somebody could have a look and tell me if that is ok or not.
* { margin:0; padding:0; }
html, body, #wrap { height: 100%; }
body > #wrap {height: auto; min-height: 100%;}
#main { padding-bottom: 150px; } /* must be same height as the footer */
#main header{
height: 100px;
width: 100%;
background-color: #5d3be6;
}
footer{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
background-color: #afeba4;
}
/* CLEAR FIX*/
.clearfix:after {content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
#layout_left{
float: left;
width: 100px;
min-height: 100%;
height: 100%;
background-color: #f21ce7;
}
#layout_right{
float: right;
width: 100px;
min-height: 100%;
height: 100%;
background-color: #f21ce7;
}
#content_layout{
border-left: 100px solid #e4f662;
border-right: 100px solid #e4f662;
width: auto;
height: auto;
background-color: #c36161;
}
#content{
margin: auto;
width: 96%;
}
As you've stated you're new to CSS but I'd very much recommend against your layout, it's seemingly 10 years ago standard. (no offense intended ofcourse, you're new to this, you're not going to know the do's and do not's as of yet).
Research online portfolio examples using google for ideas!
to answer your question:
I recognise your sticky footer code, I didn't work for me either, well not completely.
It doesn't work great, I'd recommend: http://css-tricks.com/snippets/css/sticky-footer/
I'd tell you myself but that tutorial is very well written and easy to understand and implement.
And for centering container use:
margin: 0 auto;
centering text you can use:
text-align: center;
Hope that helps.
After searching just about everywhere and validating my code a few times (and fixing the mistakes) I am at a loss as to what to do. I started programming this layout in firefox and everything looked perfect then went to check out Chrome and make sure it was ok and low and behold, Chrome screwed it up.
The site is here: http://semperfiwebdesign.com/slipstick/ The problem is with the margins on the footer and footer_top classes.
And I wrote down the code differences for the footer margins and they are stupidly big. Below is the CSS of the original:
.footer_top {
float: right;
margin-right: -26px;
margin-top: 69px;}
.footerlinks {
float: right;
margin-right: 120px; }
#text-14 {
float: right;
margin-right: -25px;
text-align: center;
margin-top: -69px;
}
They run in the order they appear with the footer. So footer_top is the box with the top and bottom border, footer links is the paragraph of non working links and finally #text-14 is the "ad" image below the links. I apologize for the weird class names but wordpress gave me a lot of them.
Now seeing that above here is what I figured out using firebug in Chrome to what Chrome wants the fix to be:
#text-14 {
margin-top: -190px; }
.footerlinks {
margin-top: -279px; }
.footer_top {
margin-top: -422px;}
Obviously this is a little absurd and I can't place these numbers into the real style sheet without truly messing up the entire layout.
I have literally searched just about everywhere and I'm at my wits end. I have no idea where to go with this. I would post the entire CSS but since it's wordpress site it's a little long. So if you need to see anything else please ask and I will post it.
Thank You
Megan
set #container -> position: relative;
#primary {
background-color: #002E5B;
color: white;
/*float: left;*/
height: 100%;
left: 0;
/*margin-left: -685px;
margin-top: -30px;
min-height: 2500px;*/
position: absolute;
top: 0px;
width: 168px;
}
and remove all references to #primary in 3c-c-fixed.css
Hope this helps