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;
Related
On my website, I want to cover a page (not the home page) completely with a picture. It should completely fill the screen on every device. I have specially created a childtheme to handle this problem.
On my website, I want to create a gallery facility that greets the visitor with a picture across the entire screen. I've created a childtheme for it as already mentioned. I first tried once in the functions.php folder to set the content width to 100%. Unfortunately, this did not work. Then I tried it with all over the custom css field on my wordpress theme. That too did not work.
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
}
With this code, it should actually be funkitoinieren as I want. Unfortunately I can not integrate it into my data. He does not fit in functions.php and he does not work as a custom css either.
// set default content width
if ( ! isset( $content_width ) ) {
$content_width = 680;
}
This code in the functions.php folder was my second attempt. I could not set the width to 100% and on all other values she looked the same.
I expect that the picture under philippfalkenhagen.de/tiere-2`fills the entire screen. unfortunately it is not like that. When I used 100% of the second code, I could not even access my website until I reset the code.
Since you are dealing with a background and not a figure itself, try to use background-size: 100% 100% and background-repeat: no-repeat.
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
background-repeat: no-repeat;
background-size: 100% 100%;
}
background-size: cover;
will help you to solve this issue.
updated:
`element.style {
background-image: url(https://philippfalkenhagen.de/wp-content/uploads/2019/10/Reh-im-Mohnfeld-Startseite-1.jpg);
max-width: 100%;
height: 801px;
width: 100%;
background-size: cover;
}
This is my functions.php folder:
https://we.tl /t-g7Mvc2EbC6
I suspect that I have to put the code here, but I do not know where.
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.
I'm attempting to build a draft version of a website for the police service of a small nation using WordPress and the Webfolio Theme by Site5.com.
I've encountered a problem whereby if I select to use an image for the background of the theme using the theme's customization options/WordPress options, the black header that is repeated at the top at either side of the header does not display.
Now when I add the background image it looks like this
I tried reading the Site5 documentation but it doesn't have information that helps. Their support forums also seem quite inactive which is why I decided to ask here.
I've had a look at the CSS file and found the following:
* { margin: 0; padding: 0; }
body,html {
font-weight:normal;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#333;
background:#EFEFEF url(library/images/bk_body.jpg) repeat-x;
}
When I add the background image the CSS is still the same so I'm not sure how WordPress themes implement optional background images. I've attempted to fiddle with it to no success, but my knowledge of CSS is limited.
My question is, is it possible to use the background image while maintaining the top header bars as in the demo site? If so, could anyone guide me on the way how?
Edit: I've also tried using the built in Background Image options but all of them have the same result.
The black bar is actually a background image applied to the body. You coud use multiple backgrounds to get the effect you're after:
body, html {
background-image: url(library/images/bk_body.jpg), url(your_image.jpg);
background-repeat: repeat-x, no-repeat;
}
I think that your problem is the background-image in header
header {
background: url(library/images/bk_header.jpg) 100% 0 no-repeat;
/*other css rules*/
}
that refer to style.css row 153
remove that image with a transparent background or something that you want.
e.g. background-color: transparent;
Please remove header image from style.css
header {
background: url("library/images/bk_header.jpg") no-repeat scroll 100% 0 rgba(0, 0, 0, 0);
height: 195px;
padding: 0 8px;
position: relative;
z-index: 99;
}
remove background from header
header {
height: 195px;
padding: 0 8px;
position: relative;
z-index: 99;
}
Wondering if anyone has a solution for this.
I would like to present an archive of thumbnail images oldest at the bottom and newest at the top. I would also like the flow itself to be reversed... something like this:
The page should be right aligned, with future images added to the top of the page. I am creating the page dynamically with PHP pulling image filenames from a MySQL DB. The catch here is I would love this layout to be fluid, meaning most PHP tricks for counting images and building the HTML accordingly go out the window.
Is there a way to do this with Javascript or even just CSS?
See: http://jsfiddle.net/thirtydot/pft6p/
This uses float: right to order the divs as required, then transform: scaleY(-1) flips the entire container, and lastly transform: scaleY(-1) again flips each individual image back.
It will work in IE9 and greater and all modern browsers.
CSS:
#container, #container > div {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
}
#container {
background: #ccc;
overflow: hidden;
}
#container > div {
float: right;
width: 100px;
height: 150px;
border: 1px solid red;
margin: 15px;
font-size: 48px;
line-height: 150px;
text-align: center;
background: #fff;
}
HTML:
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
..
</div>
CSS Flexible Box Module was made for this type of thing. See a quick example I whipped up: http://jsfiddle.net/c6QLC/2/ (look at this in Firefox)
Now the bad news: you can't really rely on it yet. Not only is the spec being rewritten, the current implementation doesn't support box-lines (which I did include in the example), which would allow the items to be in multiple rows as opposed to being overflow.
The new spec is being written into dev versions of some browsers, so it will happen. It's just a matter of time.
In the meantime, perhaps something like Isotope might fit your needs.
Should you want to check out the spec, you can find it here: http://www.w3.org/TR/css3-flexbox/
This can be solved with jquery masonry plugin. It's a bit like isotope but free of charge for private and commercial users.