I can't seem to get these social buttons to fully right align. I've set the margins of the page to "0" and have set the alignment to right="0" - any ideas what else to do?
The url is: http://www.radiobootcamp.org/TEST.html
Thanks!
add
style="text-align:right"
to that twitter div
This will allow to align the social media buttons to the right.
The initial width of a block level element like div or p is auto. This makes it expand to occupy all available horizontal space within its containing block.
.twitter {
border: 0 none;
height: 150px;
position: fixed;
right: 5px;
top: 400px;
width: auto;
}
The thing is that they have float defined as left. I would suggest to add float:right !important; and if not working put each button in a different div with height:auto and width:auto and put float:right on that div container.
Related
I am trying to make some responsive cards. I have the cards completed and spaced out properly. On the front of the cards I want an image on the top of the cards and a title in the middle. The title is fine and the image is fine except for the right side of the image.
Here is the CSS code for the image (image is in an img tag in HTML page with a class of "image"):
div .image {
padding: 5%;
height: 45%;
width: 100%;
}
The right side for some reason is ignoring the padding and sticking out of the card parent div. Any ideas why?
did you already set div's width?
also as far i know is no need to set image's height if you already set it's width to 100%
anyway here some example
div { width: 200px; height: 150px; padding: 6px; }
div img { width: 100%; }
You set the width to be 100% and padding 5%. Make sure you have:
box-sizing: border-box;
for the parent.
Also without the full example of code, hard to answer. Can use overflow: hidden; on the parent to hide that part sticking out.
I am trying to implement a grid onto this page. Because the Wordpress page uses overflow:hidden to the layout it will need to remain as is.
Out of curiosity, I tried
.content-container, .content {
overflow:visible
To see if it will reveal the entire grid that was cut off and it did, but also revealed what I am trying to hide through the layout, a spare bit of page.
Is there any way that I can reveal the whole grid without having to allow the overflow?
It cuts off the sides because .container's width is set to a fixed value of 1170px. If you set .container's width to 100% all content will be stretched.
.page-id-2099 .container {
width: 100%;
padding-right: 0px;
padding-left: 0px;
}
This will work:
.page-id-2099 .content-container, .page-id-2099 .content
{
overflow: visible !important;
}
I am developing a webpage for images on a carousel. How can I move an image down in a DIV, or even center it vertically?
Here is my CSS code:
.carousel .item {
height: 900px;
background-color: #777;
}
.carousel-inner > .item > img {
display: block;
margin-left: auto;
margin-right: auto
}
Here is a URL to the webpage in question to show you that the image is too high: http://www.canninginc.co.nz/canluciddream/screenshots.html
EDIT
Ok, I have edited the code by changing the:
margin-top: 50px;
I am still after the image to be lower in the div. I can increase the top margin, but this leaves a white background. What would be the best way to move the image a little bit lower?
First of all make the .item position relative and then
on css:
.carousel-inner > .item > img {
position:absolute;
top:25%;
left:25%;
}
This will center the image vertically
Give margin top of 130px to the image and it looks cool!
margin-top: 130px;
Put image inside the main body, set the main body to position: relative, then set the image to position: absolute; top: 0; left: 0;
If you can't put the image inside the main body, then add a negative margin-top to the main body.
Your problem is not the image being placed too high - it is fixed header. So set margin-top:50px instead of -80px for .myCarousel.
The reason the image is going behind the navigation bar at the top is because you have the navigation bar's position set to fixed. This removes it from the rest of the page for styling purposes, in that the other divs/elements do not recognize it when they position themselves. If you remove the position: fixed; css on that item, the other elements will position relative to that one. Another option would be to add enough of a top margin to the image element to push it down below the top bar by default, whichever you prefer.
Id like to know why my inner wrap of the desktop css for this site is not working.
Basically if set innerwrap to margin:0 auto; and width: auto; there is no problem, but it's not centered on the footer or main div
When I have innerwrap as it's currently set margin:0 auto; and width:960px; you'll notice that the page presents a horizontal scroll bar after resizing the window a bit, and all the content is squished to the left with a white background starting to become visible.
Is there anyway to have it transition fluidly to the next tablet size layout without have a scroll bar appearing and content getting squished?
It shows Scrollbar because of the padding you apply in .innerwrap
Read this article about the Box Model
Use of padding on the sides of certain elements when applying 100% width to parent element its not recommendable because it adds width to the whole group, and since you,re using the browsers width it shows the scrollber to see the extra space you added.
My humble advice is that if you want a block element to appear centered apply an margin:auto style rule whenever is possible, the same also has to be displayed as a block element with no float.
Remove this:
.innerwrap {
margin-left: auto;
margin-right: auto;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
Keep This
.innerwrap {
margin: auto;
width: 960px;
}
Since you are applying fixed margins for you social icons they will show misplaced, so don't use fixed margins for centering them, use percentage width instead.
you may want use a common class for aligning them
.social {
background-position: center center;
background-repeat: no-repeat;
display: block !important;
float: none;
height: 150px;
margin: auto;
padding-top: 50px;
width: 30% !important;
}
For a.twittersocial and a.twittersocial:hover and the rest of the social links just keep the background properties.
Create a determined class if you need to apply common style rules to several elements (if there are many of them) and avoid usage of ID selectors whenever is possible, use classes instead (.daclass).
Use a web inspector like Firebug to track down styling errors.
Good luck Developer!
I've tried so many things on this page
https://boycottplus.org/campaign/reclaim-our-time-say-no-time-wasting-websites
On the right column, I can't get a padding or margin of 10px between it and the left column without a scroll bar appearing. I've tried using a wrapper div but everything I do seems to bring the scroll bar :-/
The style I am focusing on
.subsection .inner {
padding-left: 10px;
}
in firefox
Add overflow:hidden to your body style.
Are you setting width and padding on the same element?
For example, if you have:
.subsection .inner {
width: 100%;
padding-left: 10px;
}
then the total width of the inner div will be 100% + 10px, which will result in a scroll bar.
If you want to remove scrollbar in horizontal direction, then use overflow-x: hidden; in that particular HTML element, keeping your vertical scrollbar intact.