http://www.shaunhillphotography.co.uk/
I have an image scroller on my front page and I want it to span the width of the white space. I had it working earlier but accidentally removed the code when I was tweaking the customer CSS.
It looks like it relates to:
#riva-slider{
}
I don't know what I need to put in to get the positioning correct.
Any help would be gratefully appreciated.
You can try increasing the width of the shell and using margin-left to push it to the edge of whitespace.
#riva-slider-1-shell {
width: 1000px;
margin-left: -25px;
}
Try to add in your CSS file:
#riva-slider-1-shell {
overflow: hidden;
}
Related
I'm stuck in a css position, how can I make all alignment button of each column in same row? I'm using wordpress plugin and tried used css to select class name, but class name are specify for all button, please somebody help me out..
Try this
CSS
.vc_gitem_row .vc_gitem-col {
padding: 10px;
min-height: 300px;
}
.vc_btn3-container.vc_btn3-left {
bottom: 0;
position: absolute;
text-align: left;
}
Note: You should scope this changes so they don't affect other sections of the site
Without seeing the code this is a bit difficult to answer, but I would take a look at setting min-height for the description above the buttons. Then it would at least push all the buttons to be aligned in a row. You would have to go even further setting some media queries to improve this styling when it comes to mobile.
Either you need to set height of Text container
max-height: 100px; //as your requirement
or set button wrapper style property
bottom:0px;
Set a min-height value for product text content just above the button in product card.
I'm trying to make this suggestion box be on top.
I can't get the z-index to work properly. Any suggestions on how to edit the CSS to make it overlap the next content block?
Site URL: https://shop.cph.dk/thejourneyison
.class {
position:absolute
*or*
position:relative
padding: 0px;
z-index: 10000;
}
I'm using wp-supersized to set a full width background that dynamically resizes. http://wordpress.org/extend/plugins/wp-supersized/
Here is what I have implemented: http://www.preview.sharonblance.com/
I have a fixed height header with height of 154px, and I want the top of the image to fill the screen from the bottom of the header, so that the top of the image isn't getting cut off.
I think that the plugin uses the browser full height though and I want to try to change this.
Can anyone suggest how I could do this?
Hopefully it's never too late to answer one of these. My response is inspired by this post, that unfortunately didn't work for me, but let to a solution: https://github.com/buildinternet/supersized/issues/72#issuecomment-6427232
First, you need to add this javascript (I placed it right after the $.supersized call):
$('#supersized li').height($(window).height() - 154);
Then, add some CSS:
#supersized li { top: 154px !important; }
#supersized li img {
width: auto !important;
max-height: 100% !important;
top: 0 !important;
}
Finally, you might want to disable the supersized overlay while debugging:
#supersized_overlay { display: none !important; }
Good luck!
#supersized li for this class add top: 154px; I mean height of the header. hope it will work.
I guess this is already solved but here it is anyway!
find your supersized.css file and edit as follows:
#supersized img {
padding-top:154px;
}
I am struggling with a CSS issue. I want to display a Google +1 button next to ShareThis buttons (I am using Drupal).
For some reason, Drupal adds a panel searator CSS class:
I tried to modify my CSS file as following:
.panel-separator { display: none; }
but it only produced this:
There is enough space to the right of the ShareThis buttons to display the Google +1 buttons. But, the buttons are stacked on top of each other.
How do I get the button to align horizontally? Thanks.
Update
I have set a lot of width and I also added float: left;:
.GYPO_social_buttons {
padding-top: 91px;
width: 200px;
float: left;
}
.GYPO_share_this {
width: 90px;
}
.GYPO_google_plus_one {
width: 40px;
}
Here is the enclosing div according to firebug (I am using Firefox):
Update II
Woops, my bad. I have now set the float: left; on the button themselves rather than the enclosing div and the issue is solved. Thanks !!!
.GYPO_share_this {
width: 90px;
float: left;
}
.GYPO_google_plus_one {
width: 40px;
float: left;
}
You need to give enough width to the container div, that is holding these icons. After that you can float these icons by giving float: left; . The reason why Google +1 is moving down is because the container div doesn't have enough width to accommodate this next to mail icon.
From the portion of html and css you are providing it is a little bit difficult to find out what would be the best way to do this. The question is what generates the break. It could be that the parent element is not wide enough to and the +1 needs to be below. In that case you can simply change the width. It could also be that there is css that generates a break (e.g. display: block and no float for on eof the elements) In that case you might try to change that to display: inline or a float: left for the buttons. There might be a clear somewhere in there which would cause the float to break (although it doesnt look like a clear on the image)
I suppose there are more possibilities than that...
I need to see more of your code. If you have tried to make your container larger to hold all of the icons and that didn't work, I would guess it was another element forcing the icon to the next line. Without more code, all I can do is make a guess...
I was in the same situation once. Here's what solved my problem:
You can also choose the "style" setting on the region and choose "No markup at all". This will remove the panel separator.
For more info: https://www.drupal.org/node/579020#comment-8163459
I'm trying to place an img to the bottom of the outer div.
Sadly it is not working as the default styles from wordpress are making it impossible...
My Project
The img I'm talking about is the small image on the left next to the big main one...
I would appreciate any help as this is already driving me crazy for hours!
Any help is appreciated!
Thanks
edit:
Here's a picture of what it should look like later:
It would help if you posted a picture of what you want the end result to be, but to put an element at the bottom of a container the usual way is setting it's style to something like position: absolute; bottom: 0 you can put a small value in bottom: to offset it a bit to match, you can then use left or rightto set the offset with the other limits of the container.
Edit: I tried this code in the img tag with firebug, seemed to work like in your picture:
element.style {
bottom: 90px;
position: absolute;
right: 350px;
}