I can't seem to find any other Tumblr theme questions like this, so I'm starting a new thread!
My issue is that in my Tumblr theme, is a container theme (or so I believe), but the images in the posts are in fact bleeding through the side of the container. There is use of a max-width:400px snippet of code in the img entry, but it doesn't seem to be working. So this is what's there:
img {
margin-bottom:0px;
max-width:400px;
}
.entry img {
max-width:400px;
height:auto;
}
I tried doing width:auto; as well for the best fit of the image. But while that makes the image look perfectly matched to its original ratio, it still bleeds out the side of the container.
I have browsed Stackoverflow for a bit, but haven't found any solution that quite matches. I've also tried various adjustments, but they don't seem to be working.
Any help is greatly appreciated! I know this is a question easily solved, but I'm quite new to CSS and would appreciate the help this time!
Related
Site URL: http://www.midwestcleancomedy.com
Please advise on the best way to present my question and the info you need as I'm a beginner. Here's a codepen I created that just has my custom CSS at the top, and the parent theme CSS which starts at line 252
I've cleared my cache, enlisted WP designers, and they were unable to pinpoint what is going on. Some of my early custom CSS worked, but most of it is being ignored, even if it's at the bottom of my stylesheet with !important as a last resort.
Since this happens many places, I feel like once I find the issue it will hopefully lead to solving others. It's now affecting nearly every change I want to make.
Current issue: Making my site responsive at the mobile width,
#media (min-width:320px) and (max-width: 479px) {
. container .et_header_style_left #logo {
max-width: 80% !important;
float: left;
}
}
Just trying to get the logo on the left and the menu icon on the right, same line, but nothing I try seems to change the logo width or the menu's left padding: 175px.
I had someone look at my style sheet, and it was a mess. I don't know exactly what they did, but they said there were formatting errors everywhere. #media issues abounded. Sorry I can't be much more specific, but basically I had to start a brand new style sheet and make much better notes. Thanks to everyone who responded.
I have a site that can be seen at gronenproperties . com
I am using a div with an id "contact-add"
and absolute positioning it in the DIV where I want it to be.
Firefox shows it fine for the most part, but it shifts when i resize the window, and different browsers and OS's seem to place it somewhere else entirely.
I have been out of the game for awhile when it comes to css and making things cross compatible...In my research, it says to make the parent div relevant and should solve issue.
Pretty sure Ive done that.
If someone could teach me old tricks, but new trick to me.
Id greatly appreciate it
Thanks
Put everthing in a div with margin: 0 auto; and width: 960; or width: 1120;
I'm programming my website and I wanted to create different css for different resolutions.
I've done this by following the tutorial up there: http://css-tricks.com/resolution-specific-stylesheets/
Everything done correctly, but when my window resizes for the narrow css, all images are big.
1 Question: How can I resize them in the css?
2 Question: If I don't want to show some div in the narrow style, using "display: none;" will block it from loading or it just hide it?
Thanks a lot and sorry for my bad english.
This might be a good article to read through. It's one of the better articles I've read about "responsive web design." http://www.alistapart.com/articles/responsive-web-design
This might also help with fluid images in case you wanted to dynamically resize images through the use of the following:
img {
width: 100%;
}
Not super IE friendly from the sounds of it, but workarounds are explained in the article.
http://unstoppablerobotninja.com/entry/fluid-images
This is the final result of the first "A List Apart" article... pretty well done IMO. Try resizing your browser to see how it adjusts. http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html
Use this for resizing images
#my_image {
width: 50px;
height: 100px;
}
To answer your second question, display: none just hides it. The image will be downloaded
I have to add a weather widget to a website whose markup is a total mess (it was converted from a wordpress site using a website copier). I can't add it to the current structure because it throws everything off, so I wanted to drop it in at the top of the document and use absolute positioning to deal with it. This works to an extent, but it falls short with different resolutions, browsers, etc. If I try relative positioning it pushes the rest of the document down. Any hints on what to research to solve this problem short of reading the css spec?
Update:
I was able to figure out a solution by combining the information that all of you provided along with "%". I used absolute positioning and set position:absolute;right:28%.
Thank you all for taking the time to answer so quickly.
I disagree with Joseph and Kasturi.
You want position:absolute
div#weather-widget{
position:absolute;
top:0px;
right:0px;
height:100px;
width:150px;
}
Maybe setting height, width, font-size, line-height, etc. would help solve your browser inconsistency problems. Also, look into a CSS reset template.
Beyond that, you would really need to post some code for more definitive help.
Reference:
Learn CSS Positioning in Ten Steps
This definitely needs a positioning attribute and I would suggest fixed. The only other option of taking it "out of flow" is to float it, but that could get messy.
so without further ado:
{
position:fixed;
top:0px;
right:0px; /* or whatever */
}
And that's what I'd do anyhow :P
Position: fixed is what you are looking for... it doesnt disturb the rest of the document.... and you might need z-index to pop it on the front ....
I am very frustrated with trying to use CSS Sprites. I have asked a couple of times here, and got great advice, but still no solution. The problem is that I want my sprites in a horizontal line, not a vertical stack. I can't seem to find an example of this on the web, and all tutorials I have found seem to only describe menus and other vertical stacks.
I have given it my best shot trying to get the widths and display styles right but still to no avail.
The following code is my best shot. I'd appreciate it if anyone could look and tell me where I am going wrong. (Note the image referred to in the code is a 32x32 image with 4 different sprites in the obvious places.)
http://codepaste.net/4kwx2c
You could try
.LICtrlList
{
display: inline;
}
change to
.LICtrlList
{
display: inline-block;
}