Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I need that when the Wordpress responsive theme is resized, move the Logo image (initially in the left), to the center of its container.
This screenshot is from the div container CSS. I can see how width is variable.
EDIT: I'm using the Bootstrap theme, so this live demo might help, http://demo.opencodez.com/openstrap/
There is many ways to do that.
From the screenshot I can tell that your theme is using bootstrap and logo is placed within navbar (my guess) so you can see http://getbootstrap.com/components/#navbar
in case of top title:
#media (max-width: 767px) {
.logo-row > div {
width: 100%;
text-align: center;
}
.logo-row .img-responsive {
display: inline-block;
}
}
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
On this website I would like to fit the picture for the entire div width.
(If you scroll down you'll see the blog section)
As you can see from the picture there are some white space on left and right.
How can I achieve this?
Note: I can't edit the HTML structure of the website. I can only work via CSS or JS.
Many many thanks
You only have a max-width: 100%- So if you set width: 100% it'll work, like so:
img.scale-with-grid, #Content img {
max-width: 100%;
height: auto;
width: 100%;
}
As can be seen here (updated css in chrome devtools.)
Just give img.scale-with-grid, #Content img : width:100%
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I created and hosted a Jekyll website on github-pages using the HTML5 UP Alpha Theme found on "html5up.net/alpha"
For some reason, pages are being cut off at the top on mobile only. I've gone through the mobile css but I have been unable to locate any issues.
The site mobile css can be viewed here:
http://pastebin.com/jwNwpXyF
And a screenshot of the problem can be seen here:
http://imgur.com/ZPycfNH
Your background image of banner is getting smaller for mob device to maintain the ratio, because of which the #main is cutting from top as it has margin-top:-26em for desktop, the same applies on mob too.
To fix it you have to change the margin for mob devices. Try below css.
#media (max-width: 640px) {
body #main {
margin-top: -8em;
}
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am trying to make a search input bar and i dont want the text to go under the img
I want it to automaticly be like this. :0
You can add:
input {text-indent: 20px;}
input {
width: 50%;
padding-left: 50px;
/* Makes it not affect width */
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
This makes it so it doesn't affect with width but still adds padding
Using the text-indent is practically the exact same, you still need the:
Fiddle: text-indent
Fiddle: padding
UPDATE: Fixed Fiddle
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I am attempting to code a "semi-fluid" item for a mobile site and need a bit of help.
What I am looking to do is realign the layout when viewed vertical or horizontal.
When viewed vertically it should be...
Horizontal should be...
While it is a fairly rudimentary example, You can simply float the elements left when the screen is above a certain size. This is accomplished using a media query. You can assign media queries in CSS3 and can find the documentation here.
#media (max-width: 600px) {
#green, #red {
float: none;
}
}
Here is the jsFiddle for the simple solution.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I took a WP theme and have customized it for my needs. I have got into a issue now with CSS.
It looks fine on full size
However when resized or when viewed on iPad, the header is getting distorted. As you can see the RSS icon on the top right has gone past the colored header.
Any pointers in this regard would be appreciated.
Please let me know if you need some more information.
In case you need to check with Firebug/other inspector tool, here is my site
If a block overflows, it does not scale the parallel ones. Putting div#header div#menu and div#footer into div#content parallel to the container should solve the issue.
CSS alternative way:
Add floated fixing to the container and all childs, in this case:
#top-overlay, #header, #menu, #content, #footer {
float: left;
min-width: 100%;
}