Please bear with me...though I've been stalking Stack Overflow for years and have had hundreds of my questions answered, this is my first post.
My main content column is 880px. Right above it are the H1 and breadcrumbs which look fine on a desktop. But when I shrink the screen size or look at it on a mobile device, the text is not wrapping or centering. It's off the screen.
Here is the code in my child theme (the width in the main theme is 590, not 880):
#heading, .archive .cat_head {
float:right;
width: 880px;
text-align: center;
padding: 0 10px 0 0;
}
When I remove text-align: center; it all works on mobile, but not on laptop.
Any thoughts on how I can get the heading/breadcrumbs to center in the 880px space on all devices? Thank you!!!
Instead of setting the width:880px use percentage. Set width to 100%. width:100%;
Related
I want the main nav menu to be at 1 line on all screen not only big screens, and i want the home page to be 1 page static with no scroll only cover and footer.
This is the site: http://alaa.x10host.com
I have tried so many ways, like display flex and width 100% for container and for nav menu, but I tried alot and nothing works
display:flex;
width:100%;
font-size: 1vw
A full 1 static page no scroll and full menu on all screen sizes.
As for the menu - add this line to your css
#media (min-width: 960px)
.row .primary-menu-ul>li {
width: inherit;
padding: 10px 0;
width: 20%;
This will tell all li elements that they cannot be more than 20% of their parent element and since you have 5 menu items they will always take 100%.
as for the scroll - you need to adjust ALL sizes related to paddings and margins from px to % / em and get rid of the min height css rules for inner container (I am referring to the one with background image). Like here:
.elementor-159 .elementor-element.elementor-element-1dd43d0 > .elementor-container {
/* min-height: 34vh; */
}
I commented out this rule. Also saw some paddings set up in px as well as font sizes. Main issue with this website that inner container is not 100% responsive that's why you may see vertical scroll on mobile devices.
I have searched and searched. Fiddled and tweaked. Spent hours trying different suggestions and code ideas...
How can I have the content on my webpage, be centered horizontally with regards to the browsers view port. No matter what I do, I always end up with uneven margins and it is quite noticeable.
The closest so far is:
#MyStyleName
{
margin: 0 auto;
width: 90%;
}
However, because I am using a percentage, no matter what I do with margins/alignment it just defaults to being on the left edge of the page.
extra info:
My issue relates to the top-level, most outer page element. The very first or that holds the content of everything else.
I am not sure what you are asking, but here is a example of af centered <div> with a percentage with.
I also added border-sizing: border-box which enables you to use padding.
#MyStyleName {
margin: 0 auto;
width: 90%;
display:block;
background:red; /* Only for testing */
box-sizing:border-box;
padding: 10px;
}
<div id="MyStyleName">
Hi!
</div>
If your #MyStyleName is a block element, then it should work. If not, then it's not gonna work. In such case you can add display:block; to the selector style.
I created this site off of a PSD, all relatively elementary CSS. I have unwanted outside padding on a mobile device AND a tablet. I want the left and right edges of the site to be flush with the edges of the browser. Its about 20px of unwanted padding.
Please see my dev site:
http://america.82ndmedia.com/
I have tested removing the "margin: 0 auto" of the container div and it fixes it... however I need that for it to function on a desktop.
.container {
width: $w_total;
margin: 0 auto;
}
Any tips would be greatly appreciated. Thank you!
This is being caused by the rule:
#media (max-width: 450px) {
.header, .columns > .sidebar, .post_box, .prev_next, .comments_intro,
.comment, .comment_nav, #commentform, .comment_form_title, .footer {
padding-right: 13px;
padding-left: 13px;
}
Either remove or override this rule somehow.
I'd recommend using percentages instead of pixels because your current setup won't work and is hard to maintain using hardcoded pixels for a responsive design.
For example, you have your main wrapper div class="container" set to a max-width of 717px on smaller screens (which seems random), but inside of it you have elements like id="blog" set to a width of 1020px, which obviously won't fit.
If you set those inner elements to percentages of their outer container, it'll be a lot easier to make it work and it'll be truly responsive or fluid.
I have a website in which I want to change the space between some elements. I don't know much about CSS. I am a newbie to it. You can see the website here.This is now on a temporary domain name : timepasssite.hostoi.com.
I want to reduce the space between logo and main menu1...Home..Add a Listing..I have to move it up by a small distance.
I also want to move the search box up in the line of the Main Menu1.
I want to move up the Featured Listing up near the earth's photo 4 px distance should be enough. Listing Categories move Up close to Featured Listings 2 px distance..
Can anybody guide me how to do this ?
Here are the Common.css and Style.css files..
Download Common.css Style.css
Image :
I can't paste the files here...I don't know how to...Please download the files for me and provide me the solution!
Generally speaking, you have to use margin, padding or in case of absolute positionning, left, top etc...
In order to reduce the space between your logo and your main menu, you have to reduce (or delete) the padding-bottom in div#logo css property, located on common.css, as this :
div#logo {
padding: 15px 0 0 0;
text-align: center;
}
For your search bar, the css is contained inside the parent div, inline style. You'll have to override the top property in your css file, and giving it -50 as a value for instance.
Now you have the general idea, I think you can manage your other issues.
I strongly suggest you to use Firebug (extension for Firefox / Chrome) though.
Feel free to ask for precisions.
I seen your css. In that padding: 7px 10px 10px; making space between menu and logo, and also you were mention height also.
reduce the padding and also margin-top property.
better post your codes
make this change in common.css to remove bottom spacing of the logo -
div#logo {
padding: 15px 0 0 0;
text-align: center;
}
2, 3
I think
You can use margin-top or bottom property
or padding
In common.css, find this:
div#logo
{
/*width: 185px;
height: 75px;
float: left;*/
text-align: center;
padding:15px 0px;
}
When two values are supplied for the padding attribute, they specify the top/bottom and left/right values. Therefore at the moment there is 15px of padding being applied to both the top and bottom of the logo. (See http://www.w3schools.com/cssref/pr_padding.asp.)
Change the padding:15px 0px; line to padding: 15px 0px 0px 0px; - this will set all padding to 0 apart from the top, which stays at 15px.
You should be able to find a similar solution for your other queries: look for the container id in the HTML, then find the CSS for the id. For example, if the Featured Listing is in <div id="featured">, look in the CSS for div#featured, and edit the padding property there.
I am designing a web page which only contain a image (Images are going to change with time). Dimensions of the images are not fixed. So I planned to show images in both vertically and horizontally center. For horizontal center I use margin:0 auto; and for vertical center i use line-height and vertical-align as explained in may SO answers. To constrain images which have bigger dimensions then the windows i used max-height, max-width property with the image tag.
To see: fiddle {to see what happening replace the image with any image of greater dimension the browser window. for small images everything works just fine.}
I am also sharing snapshots:
With small image:
With big image:(I hope you can see the little scroll bar in the right)
I am using Google Chrome (20.0.1132.17)
I think you need:
html, #container /* whatever your container is*/ {
overflow: none;
}
EDIT:
You'll have to post a live page with the content you mean. JSFiddle is not enough for this question.
You can set max-height: 100%, but then you also have to set
html, body {
height: 100%;
margin: 0;
padding: 0;
}