I am using the reality wordpress theme, I am trying to display the actual image which is center focused in theme
Look this I have modified the css to
.iwp-property-gallery-slider-v1 .owl-item figure img {
position: relative;
width: auto;
max-width: 800px;
}
Here images are coming with extra white space at each end of the items. Any help would be highly appreciated.
autowidth isn't something that you can control with the css.
You need to enable it in the js with autoWidth:true
Check Documentation Here
Related
Thanks to anyone who responds in advance. My website at http://mediaroomhub.com is a full-width website theme. Please how do i reduce the width so that the background picture can show like I have it in the picture? I am not really good at CSS. I tried the following code but it didn't work.
.sec-marg-out, .sec-marg-out2, .sec-marg-out4 {
width: 80%;
}
I want it like this please
Add a specific rule to your #site:
#site {
max-width: 90%;
margin: auto;
position: relative;
}
This overrules the current absolute position of your site (in full screen) and applies a 90% width to it.
I am new to Bootstrap. So far, I was able to customize the template I based my webpage on to what I want, but I am currently having trouble adding a carousel to the fourth page. I tried to google around for working codes using a carousel away from the top of the page, but I didn't find any except one having a separate page for it. It is not possible using Bootstrap on the same webpage? Here is the link to the web template I am struggling with: Software Landing Page
Thanks, lameemon. That was what I needed. I had the right div tags, but I just need to set a height for the carousel or the section is cut down in height.
I achieved that from the answer for this question:
<style>
.carousel .item {
height: 400px;
}
.item img {
position: absolute;
top: 0;
left: 0;
min-height: 300px;
}
</style>
Hey guys i have a HTML/CSS related question here...
I'm developing on a salesforce application, which makes me use this apex tag to put images in and I'm not really comfortable with using them. I am making print layouts at the moment for some forms that i've created. Everything worked fine until i had 2 images that i needed to style differently. I have 1 image in the header and 1 image that is a box within the form. Since i am styling the image in the header with some padding and centering among other stuff...the other box image wont show up as i go to print. So i was wondering if i can just separate the header image via a div tag. Here is what i have so far....
HTML:
<div class="logo_print"></div>
CSS:
.logo_print{
float:left;
padding-left: 40px;
width: 64px;
height: 86px;
background-image:url('../css_images/seal2.png');
}
So this is the header image i put in a div tag...did not work but if anyone has any thoughts/solutions that would be great....been trying out a bunch of diff ways with no progress. Thanks
EDIT:
So I've put new CSS in with some recommendations..so now i see it on my website but when i go to print the forms...the image does not show up :/
OH and i am using #media print to put the CSS in
Reason it's not working is because you haven't specified a height and width in your css.
Try This:
.logo {
background-image: url('http://pixelative.co/wp-content/uploads/2014/06/logo2.png');
width: 209px;
height: 52px;
}
<div class="logo"></div>
Here's a codepen of the working example.
Hope this answers your question.
I have problem customizing Helix Framework template. I want to change width of the page to lets say 1140 px. If I do it in the framework menu it changes only text field width but all graphics stay full width. How I can make it look like in attachment below?
I know I can use
body {
width: 940px;
}
but it makes mobile version unreliable because there is fixed page width. So it becomes none responsive. Is there better way of editing the code?
Thank you!
If i can fully understand you...
You can try this
.container {
max-width: 940px;
}
UPDATED (comment request)
.body-innerwrapper {
margin: auto;
max-width: 940px;
}
If you would like to add background images for each or separate sections, then see below both screenshots
Example Screenshot1:
Add background image to section in Joomla Template
Example Screenshot2:
Add fixed width to container(within background image) in Joomla Template
1. To making full size background image for any section then use below code (see first 1. To making full size background image for any section then use below code (see first 1. To making full size background image for any section then use below code (see Screenshot1)
#sp-services-wrapper {
background: url('put background image url here') #b64c52 top left no-repeat;
}
2. To add fixed width to any section then use below code (see Screenshot2)
.container {
max-width: 1170px;
}
(or)
#sp-services-wrapper .container {
max-width: 1170px;
}
Just like above example, you may do for rest of each section you created
I need to fix a .gif image to a specific spot on my home page. I've placed the image in my HTML, and "position:fixed" doesn't do what I want - the rest of the page's content scrolls beneath the image. I want the image to stay in the same place at all times.
Disclaimer: I know next to nothing about HTML & CSS, so my apologies if this is a very simple question. I've done research, but nothing I've tried seems to work.
On a related note, my image changes size depending on what browser I'm viewing my site in. I read here in answer to another question that you can remedy that by using percentages instead of pixels to format your object, but I tried that and the problem remains.
Other notes: I use Chrome as my browser and am building my site using Weebly. My website address is http://www.designartistree.com/ and the image in question the ribbon in the middle of the page beneath the large "Design Artistree" logo.
Any beginner-friendly advice would be greatly appreciated! Thank you!
Here's the html code that I have for the image:
<img src="/files/theme/ribbon.gif" alt="ribbon" style="position:fixed; margin-left:27.6%; margin-top:61%; width:63.7%; height:10%; z-index:50; visibility:show">
If you use position:fixed, the element is positioned relatively to the window, so even if you scroll, the element doesn't move.
If you want it to move when you scroll, use position:absolute.
But because of your layout, you have 2 options:
Place the image inside #box
Remove the following code:
html{
overflow:hidden;
height: 100%;
max-height: 100%;
}
body {
height: 100%;
max-height: 100%;
width: 100%;
}
#box {
height: 100%;
max-height: 100%;
overflow: auto;
width: 100%;
}