Author Archives: admin

HTML figcaption size (width) too long – iPhone in portrait mode

by ,

I came across this issue when I was attempting to use an HTML <figcaption> element underneath an image on an iPhone 5s using Safari and Chrome. In portrait view, the font size of the caption does not change, even if explicitly setting a font size in CSS to a size. This may be due to the fact that browsers on an iPhone will automatically increase the size of small text. See the initial HTML and CSS below.

CSS


figcaption {
	font-style: italic;
        font-size: 0.5rem;
	text-align: right;
	margin-bottom: 25px;
}

HTML


<figure>
  <img src="http://image.jpg" />
  <figcaption>Photograph courtesy of John Smith, 
    <a href="http://www.website.com">www.website.com</a>
  </figcaption>
</figure>

With my font-size explicitly set to 0.5rem in CS, the figcaption pretty much takes up the entire width of page, when attempting to align it to the right at a smaller screen size in portrait mode.

In portrait view, the figcaption almost spans entire width of layout (not what we want).

In portrait mode, the figcaption almost spans entire width of layout (not what we want).

The figcaption in the landscape version (aligned to right and font-size relative to layout) is the desired outcome.

In landscape view, the figcaption looks just the way we want it to.

In landscape mode, the figcaption looks just the way we want it to.

Solution

It turns out that this happens because browsers on smartphones lays out the web page using a viewport that is wider than the device screen, unlike a desktop browser. Therefore using the -webkit-text-size-adjust property does the trick. After applying the property to our CSS, it should look like this below.

CSS


figcaption {
	font-style: italic;
        font-size: 0.5rem;
	text-align: right;
	margin-bottom: 25px;
        -webkit-text-size-adjust: 100%;
}

Be sure not to use “none” as the value for -webkit-text-size-adjust since it can affect how the text will be resized when using zoom in a browser. This would affect desktops as well. See the image below for how the figcaption now looks after adding this rule. Click on the image to see a larger version.

after adding -webkit-text-size-adjust property to our CSS, the figcaption renders the way we want it to (font-size) and now is aligned to the right

after adding -webkit-text-size-adjust property to our CSS, the figcaption renders the way we want it to (font-size) and now is aligned to the right

How to evenly space divs with gaps in the same row using CSS.

by ,

Evenly spacing out <div>s in a row with spaces can appear to be tricky but is actually pretty simple to do. When I first learned CSS, I used to add margins to each box or <div> on each side to create the spaces, calculating the appropriate percentage amounts for widths and margins. That was prior to using the box-sizing: border-box; CSS declaration. By using box-sizing: border-box; declaration, the margin and padding amounts are calculated for you automatically.

By using the method below, you can easily specify the width of each container in each row, without having to use margins to place gaps in between each <div>. Instead of margins, padding is used instead to create the illusion of gaps. This is accomplished by using no background (or transparent) on the parent element.

CSS


.box { 
	float: left;
	padding: 0 8px;
	width: 25%;
	height: 400px;
	text-align: center; 
	box-sizing: border-box;
}

.box > div
{
	background-color: #aaa;
	height: 100%;
	line-height: 400px;
	font-size: 2rem;
	font-weight: bold;
}

HTML


<div class="box">
   <div>Box 1</div>
</div>
<div class="box">
   <div>Box 2</div>
</div>
<div class="box">
   <div>Box 3</div>
</div>
<div class="box">
   <div>Box 4</div>
</div>

The amount of padding to add to each parent element (class=”box”) can vary, but 8px appears to be a good number, since that would calculate to 16 pixels in between each box.. The children elements of each <div> with a class of “box”, should have a background color declared.

Evenly spaced DIV's - CSS

How to Clone a Master Branch – GitHub for Windows

by ,

First you will need to install GitHub for Windows by using the following URL -> https://desktop.github.com

After installing, in the event the application does not launch properly (or at all) when clicking on Clone in Desktop button, use Option Two below:

Option One

Go to the website and click “Clone in Desktop” as shown below.

clone in desktop

You should see the following window:

Follow the prompts to clone the main repository in a local folder.

Option Two

If Clone in Desktop fails to launch the application, you can do the following. Drag the “GitHub, Inc. (US)” padlock icon from upper left hand corner of your browser into the application in Windows.

Github for Windows

Follow the prompts in the application to clone your respository.

Option Three

In the application, click on the plus sign icon in the upper left hand corner, and select Clone.

Clone in Github

HTML element jumping when using jQuery UI sortable

Element jumps when using jQuery UI Sortable

by ,

If your website is using jQuery UI Sortable, you may experience a jumping effect when you begin to drag containers or box elements. Some solutions suggest using the jQuery Draggable Widget cursorAt: option, however, this did not prevent the elements from jumping.

While dragging, as shown in the image below, you will see that the cursor (crosshairs) jumps to a location that is about 150 pixels higher than the element that is being dragged, which is a result of the jump.

jumping HTML elements when using jQuery UI Sortable

Below is the initial HTML and jQuery:

HTML


<div id="sortable">
  <div>Box one<div>
  <div>Box two<div>
<div>

jQuery

$('#sortable').sortable({
   cursor: "move",
});

$('#sortable').draggable();

This may be the result of padding or a margin applied to the parent element. In this example, there was a negative margin of -7.5px that assigned to the parent element by an external css file named module-layout.min.css.

Solution

The solution was to override the negative margin and set to zero. As a result the elements no longer jumped and the dragging effect was much smoother.