I have problems with css image width styling in my wordpress theme. The Image width is set to 100% however the image appears in it's original size. and overflow is somehow hidden. However I couldn't figure out which element is causing this behaviour and how to fix it?
http://www.dailycat.de/19-gruende-warum-man-katzen-lieben-muss-758/
Thx, I really appreciate your help!
As your .row-fluid has display:table; browsers render it as a table, so when you set table-layout:fixed; browsers set the width of the table to 100%, ignoring the width of it's cells. Your images have bigger width than the browsers canvas on mobile and when you have table-layout:auto; (default value), the width of the container becomes the width of the cell (in your case - the width of the image)
More information about table-layout on w3schools
This code should fix your problem
.row-fluid {table-layout:fixed;}
You have a javascript on your wordpress theme which overide your css. When you inspect your image there is width and height attribut generated it also affect the containers and wrapper. You have to find where in your theme to disable this behavior (clean)
Related
So I'm working on a quick portfolio and in mobile, the "email me" does not expand across the entire screen as it should, as seen on this screenshot.
I've fiddled around with content width, device width, etc. using numbers, percentages, text values, and nothing has worked to make this page perfect. I rewrote the code to be cleaner and still can't find my mistake. Is it just something I'm overlooking?
You can just view my source to get my code, since the CSS should be there.
UPDATE: I removed the navigation padding and changed all of the device-width values but now the navigation bar does not go completely across. I am very confused since the #navigation and #mobilecontact should essentially have the same widths. I'm using Safari on iPhone.
Can you add the browser and version that you are testing on, because Email me button looks fine for me (occupies entire width) in latest chrome - developer tools.
May be your browser didn't understand 100vw
If you are concerned about the clickable area of "email me" anchor text.
You can make the anchor as display:block, so that it takes up entire row
I think you are using mac safari browser and in safari browser "vw" is not supported so now you can use "px" or "%" and button will be expand.
I have checked.. you need to fix following this
First of all you should remove "width=500" from your meta, highlighted in below image.
Add following in your CSS to fix paddings
* {
box-sizing:border-box;
}
Instead of width: device-width use width: 100% and add more properties in #title . see image
Update CSS for #about, #experience, #skills to width:100%
and thats it you all are done.
Here is final result
All you need to do is to fix font-size
When you want to have a responsive design; you don't need to use specific Width for block level elements.
just
remove numerical width from body's children, then add
body,html
{
width:100%;
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}
and then if you want to set padding or margin to viewport element; the standard way is just one element with specific class handle width like bootstrap container class
So I have managed to achieve the required result.
Basically the extra padding you are adding on <div id="navigation"> (padding-left: 350px) is part of the issue.
Also you are incorrectly using the device-width attribute value. One cannot specify the width of html elements using width=device-width;. Width attribute does not accept device-width as an acceptable value.
So replace that with width=100%; or width=100vw; everywhere you have used it. See here for documentation on responsive web design using viewport meta tag and device-width.
I was able to get the button to occupy 100% of the screen width by making these changes.
Remove padding-left: 350px from <div id="navigation">.
For <div id="title"> and <div id="about"> in the media queries for max-width: 500px, changing width from width: device-width to 100% or 100vw.
Here is the output. Let me know if it works out.
I found this pure CSS slider on GitHub that I want to use but it's not responsive and I need it to be. I've tried changing .gallery .item to width:100% but for some reason the height needs to be set in pixels because % doesn't seem to work and if I don't define a height the slides are not quite visible.
Here's the demo: http://wap9.info/6334
Source GitHub: http://benschwarz.github.io/gallery-css/
As you can see if you reduce your browser's size, the slider height stays the same. Can I make this responsive?
It already is responsive. When I change my browser height and width then the hero/slider changes accordingly and nothing seems to break.
EDIT::
Try to remove the js-autoheight hook class from the hero section.
<section style="min-height: /*some value*/px;" class="js-autoheight gallery items-/*Some value*/">
I currently have a website where I'd like the main body portion of the page and footer (below the header image and navigation bar) to always take up the available view space, but to expand below this if there's more content. I've been setting min-height of my container of class mainbody to a calc() function. The HTML and CSS have been tested and behave correctly in Safari and Chromium, however it fails to behave as intended on Firefox. The problem is most apparent on the Alumni page, which has no content at the moment, and also occurs on the Media page on a large enough screen . Is there anything I'm doing wrong?
100% height means 100% of the height of the content. To be honest, I don't know why it works in chromium and not in firefox.
What you need is 100% of the viewport. There are cool vw and vh units for that. (See availability.).
If you change min-height to min-height: calc(100vh - 268px) !important;, it will work.
If you want old style solution, you can google 100% height css, e.g. enter link description here
P.S.: Also fix your CSS.
I'm working on this page and I'm having a issue with the DIV where sliders are. This div#home-slider has a height: 350px as you may notice and it works fine for large resolutions but since the page is responsive, when I resize the window or see the page from a tablet or smartphone a white row appears just below the sliders and it's caused by the height value since it doesn't change. Can any give me a solution for change the height or tell me if there is a CSS solution or hack for this? What would yours do in this case?
Have you tried to change the height to 100%?
I would remove the height declaration.
Is it possible to set width in CSS in percents of height? Like on picture:
No, you can't do this with CSS.
You can not set height like that in css.
There is little use even if You can, because different users have different preferences about using toolbar which occupy height on monitor, some even have multiple lines of bookmarks, some view Web in full screen - therefore there is no point of setting page layout according to browser height.
Only good recommendation is setting width to 1000px because most current day monitor resolutions can display that without horizontal scroll.