I have been trying to adjust my site's header logo size as now its way to big. I would like it to by 476 x 83px (which is the files nominal size) and tried tweaking the functions.php and style.css but can't seem to figure out why my header image remains so big and stretched.
I tried changing the values in the code below in the corresponding part of the style.css script but it has no effect on the size. Not sure where or how to control this on my site.
#branding img {
height: auto;
display: block;
The site I am working with is https://divesummit.com
Any help would be appreciated.
Thanks!
you are adding too large value to the logo width and height
normal sizes are 250 x 100px
2 while you are trying 476px for width which is a too-large size and only 83 for height which is not equal to the normal logo and looks too small.
try this code
"
#branding img{
height: 100px;
width: 250px;
display: block;
margin-left: auto;
margin-right: auto;
}"
Related
I tried my best but I couldn't make the following theme full width/screen by editing the CSS. And Single post wider so embedded video will be more width and height same as youtube video width and height? I'd be very much grateful if you could show me or give me a hint regarding this customization.
https://www.happythemes.com/demo/?theme=videonow
I'm using above theme on this website. http://nepvideo.com
You see the footer in the above theme(It's full width), how do I make the whole theme's body/container full width like the footer?
Note: I tried adding/removing margins/paddings etc.
If I understand correctly, you have to change to following
on line 896
/* Site Content */
.site-content {
width: 100%; /*max-width: 1000px; */
margin: 20px auto;
}
and on line 909 add max-width: 100px; and margin: 0 auto
/*--------------------------------------------------------------
# Featured Content
--------------------------------------------------------------*/
#featured-content {
background-color: #fff;
padding: 20px;
max-width: 1000px;
margin: 0 auto;
}
I'm pretty new to coding so it may be that I do not understand what I'm doing. I've tried every bit of code advice given on this website that seems to pertain to my situation and I cannot get results!
My carousel sliders are outside my images and I need them in/on my images. I want them the size they currently are so viewers do not have to scroll up and down to view my entire picture. You can view my predicament at http://mirandarodgers.com/lenoxhouse.html
Like I said, I've tried everything under the sun. Currently my code just says:
.carousel .item{
min-height: 525px; /* Prevent carousel from being distorted if for some
reason image doesn't load */
}
.carousel .item img{
margin: 0 auto; /* Align slide image horizontally center */
position: absolute;
min-width: 100%;
height: 525px;
max-width: none;
}
I'm ashamed of how much of a hack this is, but it might help you out:
.right {
right: calc(100vw / 2 - 374px);
}
.left {
left: calc(100vw / 2 - 374px);
}
So to solve this I gave both the images and the .carousel a fixed max-height (I used 400px).
.carousel .item img,
.carousel {
max-height: 400px;
}
You vertical images will scale to a height of this value.
You can play around with different max-height values and even have the height depend upon the screen size using CSS Media Queries.
Whats happening is that the slider images are aligned to the sides of the actual carousel itself, if you want to restrict the size of the carousel set a max-width on it. This is because the size of your images cannot fit the width/height of the carousel and there isn't any code for resizing the img or the carousel. If you work on the resizing of your elements it should solve the problems you are having and try to find better images that are roughly the same dimensions or the carousel will expand/shrink unexpectedly if it isn't handled correctly.
I added the following to .carousel and it looked much better on the site.
.carousel {
max-width: 70%;
position: relative;
margin: auto;
}
Also i would add an img tag with
img {
max-width:100%
}
And this
.carousel .item {
max-height: 525px;
}
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
I have padding to the right of my archives and search page and I believe it has to do with my body element, however I'm not quite sure what is different on these pages are from the other pages on the site of which are all fine for style wise as they all use the same format. It's a wordpress website. As I said, it's only happening to this page and the search page and all others are fine, so I'm confused as to what it's doing.
html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; background: url(img/BG.jpg) repeat; min-width:1024px; }
body { margin: 0px; padding 0px; font-size: 13px; line-height: 1.231; background: url(img/NAV-bg.jpg) top repeat-x;}
header { width: 960px; height: auto; margin: 0 auto; display: block;}
#container { width: 960px; margin: 20px auto; padding: 0 1.5em;}
aside { width: 260px; height: auto; float: left; position: relative;}
#main { width: 650px; height: auto; float: right; position: relative;}
#footer { width: 100%; min-width:1024px; display: block; height: 503px; background: url(img/FOOTER-bg.jpg) repeat-x; background-color: #821d20; position: relative; top: 100px; }
If you decrease the size of your window you'll notice that a scroll bar on the bottom of the page shows up and then the padding on the right starts to take shape. If you make your window larger that padding space is then gone and the scroll bar on the bottom disappears. Have I restricted my body tag in any way to have this happen?
I've looked through this one but I already have a min-width defined.
Website has strange whitespace on right side of the page when the browser is resized to a smaller window
In your style.css file at Line 108, remove the width attribute from the header tag to fix your horizontal scrollbar issue.
Fixed CSS:
header { height: auto; margin: 0 auto; display: block;}
For review, 3D View in Firefox browser shows the header as the gray bar with is the root of your problem. The other styles that create the text are not affected.
Tip: Right mouse-click the above image and view in new tab to see in original size.
Ah, if I'm understanding your problem correctly, it appears that the tag header, specifically its style width: 960px, is what is causing this peculiar occurrence. The containing div around the header, #main, only has width: 650px. As a result, the excess width of the header causes it to extend beyond the edge of the div.
The reason why it seems to be appearing as padding only at smaller screen widths is because the containing div around all that, #container, is centered by its margins - so the effects of the over-wide header won't become apparent until the browser is thin enough such that its right edge begins to overlap the right side of the header.
Rather than fixing this by just dropping the width: 960px from the styles of the header (which may mess up the site where this width for header tags is actually needed), I would suggest adding an overriding class to all offending tags, perhaps on the lines of .archive-header { width: auto; }. But I guess the solution is up to you, since you probably know the site better than I do.
I hope this helps! (I really do, otherwise you'd have read all this for nothing! Sorry if you did...) For the future, try downloading Firebug for Mozilla Firefox, which has a handy element inspector which will let you play around with the styles of elements to see what works. It should help you spot these kinds of issues on your own, so you can fix them quicker.
If you will notice when you visit... http://www.thebattleforarcadia.com/construction/index.html when you shrink the size of the screen the top bar content overflows it's parent div and runs over the rest of the website.
What I want to do is, if in-case the resolution of the receiving end is too small, I want to force them to have to use the scrollbar at the bottom so they can see everything. Just so the website is displayed properly.
Any coding ideas?
Thank you,
Aaron
Add...
min-width: 1260px;
at the
#news-container
css rule.
Your website will display fine in 1280x** resolutions but there will be a vertical scrollbar in anything less than that (in width).
Perhaps you could make the min-width 960px and make the text expand in two lines (pushing the top graphic a bit) ? Just a suggestion
EDIT: here's an example
#news-content {
float: left;
padding-left: 25px;
padding-top: 12px;
overflow: auto;
padding-bottom: 20px;
}
#news-container {
width: 100%;
background: url(images/news-background.png) repeat-x left bottom;
z-index: 10;
}
#news-header {
width: 150px;
height: 23px;
float: left;
padding-left: 25px;
}
The above example will make the header "Expand" when the resolution is shrinked without forcing screenwidth < 1280px users to use the vertical scrollbar
Give the body element or any other element that is setting the width you want a min-width to match that. This should make sure that whenever the page is being viewed on a smaller resolution have a horizontal scroll-bar
See here for Commonly used pixel sizes for webpages and their pros/cons.