I'm using the Nivo Slider and all the images are the same "height/Width" 766x400 but when viewing the slider in Firefox it up-scales everything to a masive 1,333px × 696px.
The interesting thing,when you do a split screen in the browser everything looks fine but full screen everything is blown up.
I'm wondering what CSS code I should be using to fix this issue
I would post my whole "code" but the images are related to my business and I'm not really sure.
Thanks
This may be caused by inline styles set by Nivo Slider, but it's hard to tell what the cause can be with example CSS/markup.
However the basics for responsive images is to make sure the width (or, often preferably, the max-width) is set to 100% and that the height is set to auto. If there's inline CSS that will override your own CSS so you may either need to add !important to those rules or edit the plugin files for Nivo Slider and remove the printing of inline styles.
So basically, try this (but you may want to use a more specific selector and you shouldn't use !important unless it's absolutely necessary):
img {
max-width: 100% !important;
height: auto !important;
}
Related
I am redoing a Wordpress website, and I am having a problem with the menu. I am using the Compass theme and this is what the top menu looks like.
Then when I do
#MainNav {
width: 100%;
white-space:nowrap;
}
in Custom CSS in Wordpress, the menu goes beyond the page.
Any suggestions? I want the menu to appear in one line and to dynamically resize. I have done extensive Googling and have tried anything I could find, including flexboxes, but nothing has solved it. I am also very new to Wordpress and don't really understand the file structure, and I'm also pretty new to asking on Stackoverflow!
I find the easiest way to get my menu to fit in a theme I didn't design is to write CSS overrides that adjust the padding and font size of the list items in the menu. Usually I do this in a media query so that only certain breakpoints are affected by my change. Here's an example of how you could get the menu items to fit nicely. Make the margin-right on the li 0. You can also adjust the font size on the li > a if you need more wiggle room.
Adjust the margin-right so it is 0
If you were not using a media query, your custom CSS would look like this:
#menu .ddsmoothmenu li {
margin-right: 0;
}
Your idea of flexbox seems to work okay as well. Although the menu may look a little funky on tablet size screens.
Flexbox
One final note, I always use a child theme when customizing a theme I didn't design. This way you can, in an organized way, customize the theme and not lose any of your code when the parent gets updated. You can read about child themes here:
https://codex.wordpress.org/Child_Themes
I'm working with the Portfolio-Press theme in Wordress. I've added a 980px wide file as the logo to give me a "banner" look. Its a weathered wood plank look. To take care of the margins to the left and right of this file that end up white, I've put a weathered plank file in the "branding" div, which is underneath the "logo" div, and given it a repeat-x so that it fills in the blanks no matter what size the screen is set at. Works OK, except when the browser is sized below 750px. There is a #media css call that activates which makes the background shift down about 100 px AND screws up the menu bar. You'd think this would be easy to find and correct, but I'm a dummy. I've searched for this css call and can't find it in a real css file. It must be generated by script or something.
The question is, is there anything that I can do about this without rewriting the javascript or whatever is writing this css? And, if its javascript that has to be rewritten, where the heck is it?
You can view the site at
www.bufalobobschalupas.com
ITs easy to see the css changing if you run it with developer tools open, and choose the "branding" div, inside the "wrapper" div.
It's hard to give a line number as the css is all minified but this is your culprit;
#media screen and (max-width: 750px) {
#branding {
width: 46%
height: auto;
}
}
Remove the width and height attributes and it looks fine.
And you'll maybe want to add a media query at that screen size which removes the padding from .col-width
.col-width {
padding: 0;
}
EDIT: Realised I'd only half answered your questions. The css file in question is;
http://chalupaholics.com/wp-content/w3tc/min/3b548d20.31cc2f.css
I don't know how that's being generated but I imagine by a plugin that's compiling the css into a single file for reduced page requests and minifying it. I'm saying that because the css and JS is being added unusually high up in the order, even before the meta data. Search through your install using Grep or Astrogrep on Windows to find the source of this CSS before the plugin has acted on it and modify it there.
In trying to find out how to add borders correctly to the thumbnails in Portfolio view, I found this post that describes the css elements I needed to update:
http://wordpress.org/support/topic/theme-portfolio-press-cant-remove-the-grey-border-on-the-thumbnails
"In your CSS file, find: #content img, img.thumbnail and remove
border: 1px solid #DDD;"
Then I override the style as I need in the header.php, directly above the closing < /head> tag. It is a bit of a hack, but I like it better than editing at the end of a long CSS file. I figure this guarantees my CSS directive will be the last to be loaded and I will always sees my small modification at the top of the file.
Not sure if this helps, but it took me a bit of searching to figure out the CSS to edit. I thought this might be a good place to share that find and how I was able to use it.
So up near the top in the CSS reset, I added an additional rule to set all image elements to be max-width: 100%. However, my images aren't resizing properly, especially the gallery. It's supposed to stay in a horizontal bar, however I can't for the life of me get it to work, and I have no idea why. I'm not familiar with responsive design in particular. I bought a book and still don't understand it. What am I doing wrong?
Thank you!
http://lrroberts0122.github.com/DWS/lab5/index.html
http://lrroberts0122.github.com/DWS/lab5/css/main.css
I can't see anywhere where you have specified what width the images should be. By adding img { width: 100%; } to your CSS it works for me.
Also you know you have included your CSS twice
I've been tearing my hair out trying to figure out why my pages based on Bootstrap responsive have an extra 25-30px on the right side in Firefox and IE when the window is <600px in width. I started to remove parts of my code one by one, until I was left only with the fluid nav bar and the Facebook SDK. Once I then removed the Facebook JS SDK reference, the padding on the right side disappeared.
You can see this here:
FB JS SDK included, extra right side padding:
https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm
If you remove the FB JS SDK, it works as expected (no padding on right side):
https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm
Since I need the Facebook JS SDK for the like buttons on my page, how can I work around this?
Oddly, in Safari and Chrome this does not repro.
Screenshot from Firefox:
Screenshot from IE:
As suggested by CBroe, you could try to alter the #fb-root style, but there may some JS actions that will change it again, or it may just disable some functions.
So I would suggest to add this to your styles :
html { overflow-x: hidden; }
With this fix, you may encounter one slight problem if you have a very small window and want an horizontal scrollbar. You might try this, though the padding reappears under 200px :
#media (max-width: 200px) {
html { overflow-x: auto; }
}
Tested on FF13, and IE9 (can't resize IE9 window to less than 200px).
It’s the Facebook DIV element #fb-root that’s causing this – once you set it to display:none or position it absolutely with say left:-200px via Firebug, the extra margin disappears.
However, doing so in your stylesheet might not be a good idea, since the SDK uses this element to display it’s dialogs etc. – so either those might stop working (setting it to display:none is supposed to stop it working in older IEs completely), or the SDK might overwrite such formatting again itself.
You should thoroughly test this, if you try adding formatting of your own to it.
I realy need your help as this is driving me nuts.
On my website www.markett.nl I have 2 divs floating next to eachother.
All the browsers seem to load nicely, accapt when I view the website on the iPad the div is pushed downwards as if its wide is to large.
I have read it mayby has to do with some css padding issues, but I believe padding is not used on these div elements. I use firebug for insight in css but cant solve my problem.
I've uploaded 2 images so you can see what the probem is:
Image 1 as is loads on most browsers.
Image2 will show the problem.
You have #media queries in your CSS file for responsive layout. Find this in your CSS (around line 2640):
#media (max-width: 800px) {
/* Simplify the basic layout */
#main #content {
margin: 0 7.6%;
width: auto;
}
and remove the margin attribute from that rule. Also you don't have to test on iPad the result - you can simply change the width of your browser window.
You're using media queries to do different things depending on the width of the viewport.
If you load your site in any browser (I'm testing with Firefox, for example) and reduce the width of the window enough, the same problem happens.
To fix it, follow Zoltan Toth's instructions.