I am currently working on a OpenCart project, and one of the pages requires a structure involving multiple images, being positioned closely together (see below).
All of the images that will be used are likely to be different sizes, but will need to be resized to a similar size (not the exact same size, but around the same). OpenCart's resize function is being used to resize these images, however the result leaves unwanted white space! (see below)
Is there any way to re-factor the code so the resized images have no white space around them?
Any help or guidance would be greatly appreciated
EDIT:
<div class="tbl">
<div class="tbl-row">
<div class="tbl-col">
<div class="frame">
<img class="imageFeatured" src="images/my-image.png" />
</div>
</div>
</div>
</div>
Related
I'm only a few months old in web development and i know my code is pretty simple but i have tried everthing i know but it is not working. The text and image are not aligning side by side if i increase the width of the image to 100% . also i want the image to go off screen. here is my html code (removing the images since i cant post it).
My css code just contains width=100%; and overflow:hidden;
<div class="row">
<div class="col-lg-6">
<h2>BE HEALTHY</h2>
<p>We are Fitlo, your number one app for weight loss, diet planning and a better overall well being. We’re dedicated to giving you the very best of health and lifestyle from the comfort of your home or office.</p>
</div>
<div class="col-lg-6">
<img class="image" src="" alt="bowl of food">
</div>
</div>
I do not have enough reputation to comment, so I will post this as an answer.
Just to be sure, you're using col-lg-6, so that will put the columns at 50% after large screen and above. If you're looking at a small screen, you'd need either col-md-6, or col-sm-6, or just col-6 if you want 2 columns all over.
If you already know that, then add the class img-fluid to your image. That should work out. This is the Bootstrap class to make images responsive. Bootstrap Responsive Images
I tried it on the attached JSFiddle link, make sure to expand the display box for the -lg breakpoint to take effect.
I am trying to set my position statically to the right side of the screen as thats where the logo I am trying to keep is. On different monitors it will flow of the screen.... Is there a way to set this statically, this is what I have right now for my slide... (using a parallax theme so I cannot force the position throughout the page, just the slide.)
<div id="slide-6996" class="slide slide-6996 cycle-slide-active slide-left light" style="background-image:url(http://18.205.33.160/wp-content/uploads/2018/08/ITData_HomePage2018_01.jpg);">
<div class="slide-body">
<div class="container">
<div class="slide-caption">
<div class="slide-content">
<h1><strong>COMPREHENSIVE IT SERVICES YOU CAN TRUST</strong></h1>
</div>
<h2 class="slide-title">Let us help you develop an IT Optimization Strategy and Define your technological priorities</h2>
<a class="slide-link button button-medium" href="http://18.205.33.160/index.php/itone-method/?customize_changeset_uuid=a588c51b-d8d4-4089-90c1-df8e14656af2&customize_autosaved=on&customize_messenger_channel=preview-2" target="_self">Learn how we can help you succeed</a>
</div>
<div class="slide-image">
</div>
</div>
</div>
</div>
This is what I've tried in CSS so far along with fixed positions (broke the page)
#slide-6996 {
width: 100%;}
Is there a way to keep the width at 100% and lock the image to the right of the slide and still be able to scroll past using CSS?
Assuming you are referring to the logo shown in the main image that is added as a background image then all you need to do is add the following:
#slide-6996 {
background-position: right;
}
This will keep the background aligned to the right so that the logo remains on the page however it will eventually slide under your text at smaller layouts. Perhaps you should use a media query to switch the alignment back to left at that point.
Another unfortunate side effect is due to the fact you have a whitebar on that side of your image you are going to be stuck with that unless you use an image without that. To save you the trouble ive edited it out myself and uploaded the image here: https://ibb.co/12dNQdn
I've got a view with Angular (v.5) components, that uses Bootstrap for making the layout in the screen. So I've got various controls, one at the left, which uses most of the space (col-md-8), and two controls which are inline, in the right part (col-md-4).
Even trying col-sm I notice that in little displays (less than 1280px), the two components in the right, get overlapped one over the other. Check:
This is how it looks in big screens, the intended behavior
But one of them "mounts" over the other like this, when you make the window a little smaller
It even reaches this point...
But when you make the window really really small, it looks like this, which is fine in my opinion.
I want to do that one of these components, actually just puts in top or bottom side of the other, or simple get advantage of all the free space, instead of getting overlapped by the other like it currently does.
This is the current code of this header of my template, give it a look:
<div class="row">
<div class="col-md-8">
<segments [config]="config"></segments>
</div>
<div class="col-md-4 date-positioning">
<div class="row">
<div class="col-md-4 col-sm-4">
<granularity [config]="config" ></granularity>
</div>
<div class="col-md-8 col-sm-8">
<date-picker-wrapper [config]="config" [dateranges]="dateranges" [doubleDateRange]="true" ></date-picker-wrapper>
</div>
</div>
</div>
</div>
What you see are the granularity and daterangepicker components, the segments one is the component you see in the final image, which occupies most of the left side of the screen (but there's a reason for that)
So, any ideas on how to style this properly with Bootstrap, so this weird behavior doesn't happen?
I'm a CSS beginner having a problem with Skeleton when the browser is resized. I have an image and text next to each other in columns as shown below (except much more text than shown below). This works fine, but when you reisze the browser to make it narrower, the text overlaps the image for a sizeable distance before it "snaps" below the image when you get to a very narrow browser width.
I think there's some way to fix this using the Skeleton CSS Utilities, but I haven't been able to figure out how. My understanding of CSS is very basic.
<div class="row">
<div class="one-third column">
<img src="images/myimage.jpg">
</div>
<div class="two-thirds column">
Lots of latin text here.
</div>
</div>
Add the following class to the image: u-max-full-width, like this:
<img class="u-max-full-width" src="images/myimage.jpg" />
So what I am trying to do is reproduce this effect (which can be seen using chrome Version 45.0.2454.101 m). The important thing to notice is that each div is displaying a piece of the overall background image in the wrapper (except it is actually a separate image of the same size that is modified by inverting the colors so you can see the difference).
Basically it appears as though each content div is using a background image that is the size of the document itself.
Structure:
<div class="wrapper">
<div class="content">
Here is some content
</div>
<div class="content">
Here is some more content
</div>
<div class="content">
So much content
</div>
</div>
However, if you were to go visit this link on your mobile device you'll notice that now each div is using its own background image and not overlaying with the wrapper's background image. The background image is now the same size of the content div and is positioned per content div. Why is this happening and how can I get the mobile website to look like the one experienced in a desktop browser? (I am also using chrome on mobile)
Link to JS Fiddle
Kudos for the effort, but this is simply not going to work as it depends on background-attachment:fixed. Mobile browsers try to actively improve the view experience by 'intelligently' handling certain page content differently, especially when it seems desktop-optimized.
One of the things they choose to do is ignore things like background-attachment:fixed, because usually it breaks more than it enhances on not-so-intelligently designed pages on a miniature screen.
So I'm sorry but http://caniuse.com/#feat=background-attachment is your problem here, and it's not going away soon :)