Please help me out with a CSS Grid problem that I am having...my last image continues to appear larger than the others in my .featured section when I try switching to grid during a media query #700px.
This is a start to a portfolio of mine, but as I decided to make my .featured section, or my images to be in grid format instead of flex like the rest of the page, suddenly my last image is showing up larger than the others.
Could someone please explain what I am doing wrong? I'm stuck right now trying to figure out why this is happening. Thank you!
Here is the link and code to my page: https://codepen.io/elcapitan23/pen/wxpmYP
Also, here is a screen capture of what I am currently dealing with:Portfolio
The css class .featured-item has a last-child style
.featured-item:last-child {
margin-right: 4px;
}
Which is the culprit, either remove this class, or override this style for last div.
Codepen link
Related
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
I'm having trouble with my code with my CSS stylesheet and HTML index coding. I only have one problem and that is my CSS stylesheet isn't letting me place a div class into it. I'm using the free Brackets software which includes syntax highlighting and it's coming up red which is an error. Here is a picture of it:
http://i58.tinypic.com/ju97cl.png
As you can see in that picture, I've boxed around the place where it's disallowing me to place the div class into the stylsheet in white. I've given a working example with the blue box so I'm confused to why it's doing this.
My main question for you today is how do I create buttons directly in the center on the side of my page with CSS or however possible and how to edit these buttons like adding hover animations, visual looks etc? (I'm new to this by the way) Also, I want to lock the scrolling of my page in a certain area like in the picture described:
http://i62.tinypic.com/wmbyw.png
Lastly, I wish to ask how to make my content on the white area transition by sliding to the side for when I click a button to go onto the next page. However possible I would really appreciate if somebody gives me the time for this. Sadly I can't give another image because I don't have 10 reputation. so I hope you can make out what I'm trying to say.
I will be so grateful to anyone who helps me with this.
First off you need to close your .right-menu class with a }.
For effects and animations check out w3schools:
http://www.w3schools.com/css/css3_transitions.asp - transistion property
http://www.w3schools.com/css/css3_animations.asp - animations
Centering in CSS can be done with text-align: center or margin-left:auto; margin-right: auto.
To prevent scrolling of the body do body {overflow:hidden}
For sliding page content refer to my links above or checkout jQuery
http://www.w3schools.com/jquery/jquery_slide.asp
I am still in the learning process and newbie at Stackoverflow. Sorry about any stupid behavior from my side.
I have a WordPress theme, and it's already responsive . I made a page, where I made 3 boxes (with inline CSS to make their background colorful, and one box floats on right, whereas other 2 float on left).
Please check that page and the 2nd box here : About Us
Now, when I check site from mobile, I see that the 2nd box floats on right and goes out of screen. I am not much aware of how division hierarchy work in CSS, so I tried few things in media queries, but I couldn't succeed. I gave that 2nd block <div id="image2" style=".....;float:right;">
and now in media query, I want it to be float:none;
Can anyone point me to how to do this? What is correct hierarchy that I have to put inside media query (which is there in a theme file).
I managed to change few things with the logo via media query, and I got the idea that I had to write
.header-wrapper .logo-wrapper {.....}
I just don't know how to do the exact same thing with this block of text.
Help is appreciated.
Thank you!
your image2 has a fixed width on both mobile and desktop
#media (max-width:767px){
/* try this */
#image2{
width: 100%;
}
}
My advice to you: AVOID INLINE STYLING...
I'm designing this site: http://ecostructionny.com. I'm just at the point where I'm laying out the home page and I'm a bit stuck. I want a footer row at the bottom that lists contact info, and then directly above it is a row of 3 blurbs of information. The background images are the main visual feature of the page, so I'm trying to leave space for them to show through.
Can anyone help with some suggestions? If there's a better way to lay it out, I'd love some other advice.
Thanks!
There is a good footer tutorial at
http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/
The demo page is here:
http://www.lwis.net/profile/CSS/sticky-footer.html
The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.
The footer is then given the following rules:
#footer {
clear: both;
position: relative;
z-index: 10;
height: 3em;
margin-top: -3em;
}
Of course you know you will get as many ideas as people that respond. Everyone's opinion is different when it comes to design. Based on your statement above I would direct you to the bootstrap sticky-footer example that comes with the download of bootstrap. In addition, in my experience, it works better if you do some work and resize the photos so they appear natural in the carousel. When images are stretched to fit it distorts things a bit. Take some time and experiment. Also, I have found that using the hero template page with bootstrap works really well for the thing you are trying to do. Experiment around.!!
Tony Tambe: bootstrap has all the responsive code yes, but you will have to add some #media queries to your styling to make the header resize and the underline under the title move down etc. You can add #media query in the html page using a style element (In the head section). Keep experimenting, is looking good.
I have been learning to use Twitter Bootstrap for the past few weeks and am finally have my first issue. I am trying to place an image inside a dropdown-menu.
The issue: The image displays at the correct full size in Firefox but not in chrome or safari, here are the pictures for reference as well as link to the site:
http://www.japaneselanguagefriend.com/application/login.php
If anyone can tell me what the issue is and also possibiy how to fix it, your help will bwe greatly appreciated!
You can add a style like
.dropdown-chart li img {
max-width: none;
}
Currently the max-width from the cascade is restricting the width of your image to the inherited width of the images parent <li>.