I am using the twenty thirteen theme, and on my mobile, the logo gets cut off.
I have tried lots of different css coding,the last I tried was:
.site-header .home-link {
color: #141412;
display: block;
margin: 0 auto;
max-width: 100%;
min-height:130px!important;
padding:20px;
text-decoration: none;
}
Anybody that has any ideas on how to fix the issue?
The webpage is: https://www.larvigaladan.se
The issue appear to be in your CSS in index.php on line 172:
Change
.site-header {
background-size: 768px auto;
}
To
.site-header {
background-size: 100% auto;
}
Edit:
I just noticed this is wordpress... so you can add that css to your custom css if you can not find the code directly.
https://en.support.wordpress.com/custom-design/editing-css/
Related
I'm trying to add a custom logo to my wordpress login form. I've a child theme active and I've used the following code inside my functions.php file, anyway the code will be ignored and I will see always the default wordpress logo. Is there something wrong in the code or I need to put this into the functions file of the parent theme?
function add_custom_logo(){
?>
<style type="text/css">
#login h1 a, .login h1 a {
background-image: url('https://www.example.org/logo.png');
height: 65px;
width: 320px;
background-size: auto;
background-position: center center;
background-repeat: no-repeat;
padding-bottom: 30px;
}
</style>
<?php
}
add_action('login_enqueue_scripts', 'add_custom_logo');
Most of the case, this cause by the priority issue - please change your action hook into this and try again:
add_action('login_enqueue_scripts', 'add_custom_logo', 99);
My website is www.rosstheexplorer.com.
I am using the Penscratch theme although have modified many aspects of it.
I recently made a number of changes including making my header and navigation bar full width.
One of the unintended consequences of these changes is now my widget-area is no longer sitting side by side with my content-area.
I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of both elements. Nothing I tried resulted in anything close to what I wanted. I would do more experimentation but I have very little idea as to where to begin.
In style.css do I have to made a modification to
.site-content .widget-area {
margin-top: 27px;
padding-top: 24px;
border-top: 3px solid #eee;
}
or
.widget {
line-height: 2.09231em;
position: relative;
overflow: hidden;
width: 100%;
margin: 0 0 27px;
padding: 0 0 27px;
border-bottom: 1px solid #eee;
See if this code works for you:
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
Inspecting your site, what i understand is, it is an issue related to float.
try applying
float:left
for your ".widget-area"
My website is www.rosstheexplorer.com.
I am using the Penscratch theme although have modified many aspects of it.
I recently made a number of changes including making my header and navigation bar full width.
One of the unintended consequences of these changes is now there is a lot of space between the navigation menu and primary and secondary areas.
I used the Developer Tools on Google Chrome and started trying to alter the width, padding and margin of a variety of elements on the page.
The below code was the closest I got to solving the problem. The below only works though if the browser window is certain dimensions. If the browser window is to small then the below code forces the content-area and widget-area to overlap the navigation menu and header.
Is there a way I can modify the below code so it works regardless of the browser window size.
.widget-area {
float: right;
width: 30%;
margin-top: -350px;
}
#primary.content-area {
float: left;
width: 70%;
margin-top: -350px;
}
Or is there another completely different solution?
Change the below css
style.css:1932 #screen and (min-width: 75em)
.site {
max-width: 1153px;
margin: 400px auto; // change this to margin: 5px auto;
padding: 54px 108px;
}
:43 #screen and (min-width: 75em)
.site {
max-width: 1153px;
margin-top: -50px auto; //remove this minus is not recommended
padding: 54px 108px; // change this to padding: 0px 108px 54px 108px;
}
kindly change the above margin and padding
It's much simpler than that:
http://www.rosstheexplorer.com/?custom-css=cedea99283
Line 45: margin-top only accepts 1 property, you specified 2 (50px auto). Just remove the "auto"
I want my page's logo and articles to be in the center of the site. At the moment everything is on the left.
I just can't make it work.
For Example I tried to delete the wrapper and set margin-left:auto; margin-right:auto; in the logo's class. nothing works.
And for the posts i just don't know where to start. probably i would have to put everything in a container and make that central? (There should be three posts in a row, at the moment the theme stacks them up to the right screen border if you have a big screen)
Thank you so much.
EDIT: The Text align in the image class did the job. Thank you guys, question answered!
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
That will do it for you :) Your header takes up 100% of the space, so the content inside has no fixed dimensions to center against. The text-align value assists with that.
Try:
#logobild {
margin-left: auto;
margin-right: auto;
text-align: center;
}
To center the logo you can do the following in CSS:
img {
display: block;
margin-left: auto;
margin-right: auto;
}
The img element is inline by default, which means your margin styles won't be applied to it. When it is set to block level the margin settings will work.
To center the articles I suggest you give a width to the container div like this:
#post-area {
width: 85%;
margin-left: auto;
margin-right: auto;
}
I'm not sure if that's the best way, but it seems to work.
Im a beginner when it comes to building a site. Thats why i choosed to build with Wordpress.
The thing is that i got i responsive theme that should work with any browser.
I upload a logo by going to appearance>Customize>upload logo.
With Crome it looks great:
But with firefox, Iphone safari and IE it looks bad:
http://imagizer.imageshack.us/v2/800x600q90/838/8tl2.png
I've a Childtheme, and the only code i've put in is to get the logo to display a bit more towards the middle:
#import url("../realia/style.css");
.logo-wrapper { position: relative; left: 10%; }
Why is it looking like this, ive tried with .clearfix codes and to change the image height etc.
Have a great day and thank you in advance!
Just remove the height from your,
.logo class
Height is causing issue on Chrome as well, while resizing the window. Image is not able to resize. So, remove the height in px.
Good luck!
I have just checked your theme out, and noticed this class:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
float: left;
height: 90px;
line-height: 90px;
margin: 0;
}
Remove the height: 90px and it should look good in all browsers!
Remove float: left from the logo.
e.g:
#header-wrapper #header #header-inner .navbar .navbar-inner .logo {
height: 90px;
line-height: 90px;
margin: 0;
}
I have recently faced this issue when my logo was not showing up properly in internet explorer, try with this code hope this will work.
max-height: 100% !important;