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>.
Related
I've created a responsive webpage and everything is working fine. I mean the layout for mobile like smartphones and tablets is ok. If I switch to desktop it looks good too except for the footer and that's because there is an empty white space at the end of the webpage if I click on inspect the browser focus the HTML tag.
One thing you have to notice is that the height of this empty space depends on the width of the viewport. Also I'm using sass. I can't share all the code here because it's divided across too many files. If you want to see all the code go here: https://github.com/justanindieguy/podcast-landing-page
And also you can see the webpage in this github personal page: https://justanindieguy.github.io/podcast-landing-page/
Thanks a lot for all your answers. This is driving me nuts, I can't find the solution.
I tried the given solutions from others to make sure none already did the trick on your page, but no success.
I then found the reason you're getting the issue. It's related to the :before of the news section, it's overflowing from the element.
Try adding this CSS :
#news {
overflow: hidden;
}
Now the news section crops the :before element relative to its own dimensions.
I noticed you achieved the layout with skew, but I recommend you to look into clip path generators and create this shape that way.
Add this line to top of your CSS file
* {
padding:0;
margin: 0;
}
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
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 recently downloaded Flexslider and managed to extend the images, and I have two things I need help with. The first thing is that I want the slider to be full width, and apparently it is being blocked from that in .container by overflow:hidden. If I remove that piece of code, everything expands and the website doesn't look right, but it removes the space between the slider and the screen. Does anyone know how I can fix that?
And my second question is how I make a small space between the slider images. Here is an example of how I want it: Example
Here are my codes:
jsfiddle
Adding margin:0px; on the body fixes the problem.
I have implemented flexslider on a website I'm building. For some strange reason the caption only appears on the first slide.
The captions are there in the markup on the other slides, but for some reason they are not displaying how they should, like the first slide is doing so correctly.
I guess I'm incorrectly doing something with the CSS, maybe positioning somewhere?
Thanks for reading :)
Add position:relative to .flexslider .slides > li
You might need to adjust the width/height. But this should work.