Much needed help for turning off bootstrap row on some screen sizes and not others, thank you!

Much needed help for turning off bootstrap row on some screen sizes and not others, thank you!
0.0 0

#1

Hi, creating my tribute page and have become a bit stuck, I am trying to have the text to the right of an image like this;


however when I reduce the screen size the text column extends beyond the picture;

Is there a way of having the paragraphs that fall below the picture to no longer be tied into the column, to turn the bootstrap row off when on a small screen size so the text is back to full page?

I have tried googling this for an hour now and can’t seem to find the answer, maybe I am phrasing the question poorly

Thank you


#2

^^ This is confusing.

On a small screen, that text should appear below the photo. Or do you want the text NOT to show on a small screen?

Can you show your code?


#3

One of the options is to use bootstrap’s visible classes, and define a whole new text and layout for extra small devices.

<div class="visible-xs bg-info">This text is shown only on an EXTRA SMALL screen.</div>

Or you could ofcourse use javascript to set different layouts for different screen sizes (I am off no help there).

Not sure if it helps :slight_smile:


#4

Hi, thank you for the reply;

Not sure if linking directly to codepen is easier?: http://codepen.io/Ian3/pen/xdZzKb

however the code is
CSS;
#header {
background-image: linear-gradient(
to left,
white,
#bfbfbf
);
font-family: ‘Kaushan Script’, cursive;
text-align: center;
margin: 0px;
padding: 1px;
}

.title1 {
font-size: 70px;
}

.title2 {
font-size: 30px;
}

#mbackground {
background-image: linear-gradient(
to left,
white,
#bfbfbf
);
margin: 0px;
padding: 2px;

}

.background2 {
padding: 10px 0px 0px 30px;
}

.sideportrait {
max-width: 87%;
max-height: 87%;
border-radius: 2%;
opacity: 0.8;
display: block;
margin: 0 auto;

}

.text {
display: block;
margin: 00px auto;
max-width: 100%;
text-align: left;}
@media screen and (min-width: 48em){
body{
text-align: justify;
}
}

}

.quote {
padding: 50px 0px 0px 10px;
}

HTML:

Les Vacances de Monsieur Hulot

Un Film de Jacques Tati

One of the most original—and hilarious—comedies ever made, M. Hulot’s Holiday has delighted and disarmed moviegoers the world over since its first appearance in 1953. There’s little in the way of plot or dialogue to this French-made farce about a group of vacationers at a small seaside hotel. But an unconventional form has not stood in the way of audience appreciation of the film’s comic content—good, old-fashioned slapstick fun. Writer-director Jacques Tati’s penchant for physical wit has prompted many to compare M. Hulot’s Holiday to the silent classics of Charlie Chaplin and Buster Keaton. And truth to tell, the temptation for comparison is just about irresistible in light of the film’s hero, the hilariously accident-prone M. Hulot—played by Jacques Tati himself.

"Of course there is a bit of me in Hulot, but there is also a bit of all of you"

Jacques Tati, 1959

Hulot’s comic comings and goings are part of a network of gags and situations woven together and unfolded simultaneously on screen. We may be following Hulot principally, but we are also tracking the movements of a small family, a young woman on holiday alone, a constantly strolling middle-aged couple, a constantly squabbling pair of hotel waiters, and any number of small children, pulling pranks or simply wandering about between the seashore and the hotel.

<p>Tati’s penchant for realism, combined with his taste and restraint, make M. Hulot’s Holiday the sort of comedy that one can enjoy again and again. A first viewing will have you laughing at the classic comedy scenes like Hulot’s tennis game, or the uproarious scene in which the hapless Hulot finds himself mistaken for a mourner at a country funeral—and that’s not to mention the bits with the muddy footprints, the raucous jazz record, or the runaway car.</p>

But later viewings reveal something else, for Tati is the antithesis of the laughs-at-any-price gagman. He wants us to laugh, but he also wants something more. In the words of critic Pauline Kael, “Tati is sparse, eccentric, quick. It is not until afterward—with the sweet nostalgic music lingering—that these misadventures take on a certain poignancy and depth.” For film director Jean-Luc Godard it’s this subtle afterglow—a comic yet becalmed view of the world—that really counts. “This is what interests Tati. Everything and nothing. Blades of grass, a kite, children, a little old man, anything, everything which is at once real, bizarre, and charming.”

thank you again


#5

thank you for the reply, was not aware of visible classes, will investigate these now!


#6

There are also hidden-xx classes… and you can assign multiple classes to the same DIV tag.

ex:

<div class="hidden-xs visible-sm mycustomclass"> 
   ...
</div>


#7

think I’ve found the answer everyone! text won’t wrap itself around an image if using individual columns for the image and text in bootstrap.

Thank you for your tips, will now investigate how to wrap text around an image using one column in bootstrap

thank you again


#8

TIP: See float property. Apply to image.