The html code on the actual webpage
Hello. I am having some problems with pictures not properly displaying on a website. I have added the picture and created a div.tag for it and also added it to the CSS but it simply will not show properly. http://mala.co.uk/projects-sw-adelphi.html is one of the new webpages that I have added. http://mala.co.uk/projects-cat-a-eastcheap.html is a webpage with a picture being displayed properly. It is really baffling me why the new pages I have added have the pictures being cut off while the older pages render the pictures perfectly. The Eastcheap picture is how the size should be (more square) but new pages are showing the images more rectangular. Any help would be massively appreciated. Kind Regards
You have set a specific height for the large-6 columns divs. Changing that height has an influence on the image, as it is relative to the parent div container.
I am not sure how that height is generated or if you have hard coded that. It might also depend on the text on the right col, which will change the height of the left col.
Edit: I have edit your code in the inspector. It looks like that.
<div class="large-6 columns panel-container" data-equalizer-watch="" style="height: 450px;">
Related
I do not understand why my portfolio area is going full width. I would like that the row that contains 4 pictures, is staying inside the content area (red lines I marked):
[![Content area][1]][1]
I have tried everything that I know until now. In the developer tools I was trying to set a smaller width, but that did not work out. Does anybody have a suggestion on what I can do?
[Link to the testing page][2]
Add class section-boxed to this <div class="wpb_column vc_column_container vc_col-sm-12 section-boxed">
you need to wrap your pictures container with a div with this class section-boxed and it will work.
As suggested by aimenzenasni, adding the class to the div (highlighted below) will sort it. Verified in Chrome Developer Tools...
Source Screenshot
I am attempting to make a page shrink to fully fit a mobile screen but with an image on one side, and an iframe form on the other, it is being pushed to the right on a phone, also does the same with a long header. I have tried every "meta viewport" combination I have seen on here and nothing is working. Is this possible or am I missing something? Thanks! There's a lot of code so not sure what should be posted here.
Link to the page: http://marketing.bigkiteconsulting.com/acton/fs/blocks/showLandingPage/a/9748/p/p-0028/t/page/fm/0
Ok, so i gather your not wanting the form to be above the div with the image and paragraph? that might give you the best look.
The main problem is the image, you need to remove the width and height from the image, and set the width to a percentage using css
<img src="http://marketing.bigkiteconsulting.com/cdnr/57/acton/attachment/9748/f-0037/1/-/-/-/-/image.jpg" border="0" style="width:100%;">
As far as the form, its too wide itself. I would suggest wrapping the last name underneath the first name, and make the email input box smaller, however if that iframe is coming form a third party there's not much you can do to it unless CORS is enabled. http://en.wikipedia.org/wiki/Cross-origin_resource_sharing
I'm working on a html only webpage, and I am having some issues correctly formatting my social-media links. I have a fixed position div that is 48 x 190, and within it I'd like to put 4 different social media icons which link to their respective pages. I was able to set up the div correctly in css styling, and I was able to insert the images into the correct position just fine. However, as soon as I added the link tag to the image, it all broke. The formatting of the image seemed to change just by adding the link to it, and they now took up all this extra space around themselves, went outside the borders of the div, and refused to be properly centered. Why is adding a link to the image breaking the formatting in such a strange way, and how can I fix it so it remains formatted how I want even after the link is added?
Thanks!
have you set the border of your images to 0 ? When inside a link, browsers put a 1px border to images if this value is not set in the CSS.
If that is not the problem, posting your code (see jsFiddle for example) could help
I guess, the issue is related to the different size (in pixels) of icons, that cause to increase div and distrub the UI. I have also used Image-Links as following and it works fine. First ensure your icon size.
<a href="javascript: showPopup();" id="groupEdit" class="link">
<img src="/images/redPencil.png" title="Update">
</a>
I added a custom control to a .NET page which allows user to upload a picture.
This control has a div element which parents an image that is supposed to get printed. The control is positioned near the bottom of the HTML structure and therefore the image gets printed on page two.
However the problem is that I want the picture to get printed on page one but no matter what I try the picture never gets there. I've tried absolute positioning and floating.
Now what to do, what to do? :)
Update:
The HTML page includes many forms and stuff so it's difficult to give code examples but here's what it basically looks like:
<div class="col">Bunch of stuff</div> // Left column
<div class="col">Bunch of stuff + the image control</div> // Right column
When print; the columns are stacked upon each other by using float, but I want the image element to be positioned on top of page one.
Since I couldn't figure out a solution for this problem, I ended up with restructuring the HTML so that the "image control" was at the top. Then I was able to position the control at the top of the printed page.
I have a page who have left and right side who is in all page.
Now I want to make a table in middlecontent but their is very few space I can't make it big.
When I created it it's work but most of part was hidden [go behind right panel].
How can I make some style then they show all content in a width and height I have means nothing goes hidden. Everything need to show even I show information using many line for particular rows [td].
Any suggestion of how to do this?
I not sure I understand your question.
try use this :
<table style="width:100%">
if it doesn't help you, link to your page, or copy the code. so we can understand better the problem.