I am new to WordPress and is currently using visual composer to build websites. While building a mobile app landing page, I am facing troubles while placing a png image between two rows. Please refer the below image -
https://i.stack.imgur.com/arJx1.jpg
The above image shows a phone which is placed in the gray row but is slightly moved up to position it between its original row and the row above it.
Please help me achieve this effect. I tried adding negative top-margin, padding but nothing seems to give the exact effect.
You can check the site I made the same, hope it will help you : http://utplanning.com/
Related
http://codercarter.com
I am working on this site for a class, and I have an issue I cannot seem to find the problem for. The background image at the EXPERIENCE section doesn't reach the ends of the pages like the first two background images do, and Im not sure what is causing it. In addition to this on the old version of the site, the three contact buttons used to be side-by-side of each other, now when I see the new version there are two, and the github connection is below them and very wide?
The last image does not reach the edge because it is inside of the "portfolio" div, which has margins. For the button issue, you can assign something like "max-width: 30%;" to each of the 3 ".card" elements.
I create two rows in visual composer both with 3/3 alignment. On the first one i place three swap images, dimensions 380x190px. On the second one I add two swap images with the same dimensions and I use css margin-left:150px for the 1st and margin-right:150px for the second to bring them more to the center. You can see the result I get to the PC browser on attached image1-pc.png Visually is exactly what i want.
BUT
My problem is that on mobile and tablet devices the responsive result is spoiled due to the margins. So the last 2 of five swap images does not appear exactly under the others in order. You can see the result on attached image2-mobile.pngenter image description here.
-How can I solve this? Is any way via visual composer to deactivated those two margins for other devices?
-Or should I do it manually by making two rows both 1/1, add inside them html block to create it on my own by using custom css code with responsive options?
Thanks in advance for your time.
I'm using Visual Composer creating some pages in WP and in the middle I have to do two things
1.create a button with a background img (single image) but with two other small images on both sides.
2.A carousel contains custom scrollbox like this example http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html in each slide.
I try but really don't know how to do that in Visual Composer.
so I want to ask if I can do that individually by html,css,bootstrap then include it in my page? and how to do that then continue to work with VC because it looks some specific things can't be done in VC. I really can not find the solution for weeks, please help me.
I am currently working on a project that involves a background image that needs to be linked specifically to an element within a container div.
The link is: http://idearevolution.ca/clients/jab/
The challenge I am running into is that as I resize my screen the green circle doesn't stay behind the guy. I've run into issues with responsive background images having to work with elements within a contained area in the past, but I've never been happy with my solutions.
The last thing I tried was using Sass to run a loop, adding a media query to update the position every 10 - 20 pixels. I don't like this solution however because of the code bloat it generates.
I am wondering if anyone has run into this issue before and if so, how do you go about resolving it? I've tried a few things but I'm just not happy with any of the solutions.
Any help would be great.
Thanks,
Andrew
Semantics would fix this problem best.
The semantics of using an image is this:
If the Image does not add to the content and explanation of the site,
do not use the image.
So, in truth, this image looks like it should only be part of the design.
Therefore, use the CSS3 Feature of Multiple Backgrounds.
Hi I have been trying to trying to hide a portion of image for my blog. Basically what I would like to do is to have images of different sizes (or same width but different heights) on my blog's single post page. But on the main page of the it should show only a portion of it, the size of the visible image should be same for all the images.
I hope the above is clear, just in case I the above explanation is not clear here is a site that works on similar way http://www.creativeapplications.net/
Now I could not get if it's done using CSS or some sort of Javascript.
Could you guys help me to understand it and achieve similar image effect.
Thank you
Takias
You want CSS' clip property: http://www.seifi.org/css/creating-thumbnails-using-the-css-clip-property.html