hey i want to make some text in the left side and one picture in the right side it should be responsive
i thought it should look like this
CATEGORY
text text text mid |-----|
text text text mid |img|
text text text mid |-----|
and when it sizes to small pictures i would like it like this:
CATEGORY
text text text ......|sameimage|
text text text ..... |IMAGEimg|
text text text text text text
here is my code for now:
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6">
<a> </a><a> </a>
<h2>Category Name</h2>
<br>text test some things just for testing his text is unnecesarry
<br>This is random text dont worry his text is unnecesarry
<br>This text is unnecesarry his text is unnecesarry
<br>It really is unnecesarry just decoration his text is unnecesarry
<br>for testing purposes of the website's design his text is unnecesarry
<br>
<br>
<h3>More Templates</h3>
</div>
<div class="col-xs-5 col-md-5">
<img class="img-responsive" src="test.jpeg" id="image">
</div>
</div>
</div>
the problem when I view it on mobiles the text is like
category
text
text ........ |IMAGE|
text ..........|--------|
text
text
text
Related
I've coded a small page using Bootstrap 4 as a framework, but it's not responsive.
Here is my html:
<div class="container h-100 d-flex flex-column" id="container">
<div class="row align-items-start" id="header">
<div class="col">
header
</div>
</div>
<div class="row h-100" id="main">
<div class="col">
<p></p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
</div>
And here is my css
html, body {
height: 100%;
}
#container {
background-color: rgb(255, 219, 164);
}
#header, #footer {
background-color: rgb(33, 202, 202);
}
When I type a long paragraph inside the <p> element it goes it a bad way and I can't solve that. How can I make it full responsive?
Normally, if it's not responsive you've not imported the required JavaScript. Follow the Quick Start page on the official documentation and that it has been put in the correct place of your project (the </body>). Use a template to start with for better understanting
I can't yet comment because of my rep but adding more code (such as your </body> and <head> information will give the the community more understanding on what you're doing.
Better use min-vh-100 instead of h-100 (or vh-100) so that you define a min-height and in case you have a lot of content you will get a scroll.
#container {
background-color: rgb(255, 219, 164);
}
#header,
#footer {
background-color: rgb(33, 202, 202);
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="container min-vh-100 d-flex flex-column" id="container">
<div class="row align-items-start" id="header">
<div class="col">
header
</div>
</div>
<div class="row flex-grow-1" id="main">
<div class="col">
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text</p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
</div>
I tried to replicate the issue that you did mention above. I couldn't replicate it. Also take a look at the files included in tag. Please take a look at this codepen attached Codepen.
`
</div>
<div class="row h-100" id="main">
<div class="col">
<p>Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.</p>
</div>
</div>
<div class="row align-items-end" id="footer">
<div class="col">
footer
</div>
</div>
`
I am currently trying to set up an html email template for my ASP.net application. Emailing part is working but my image link inside the template does not. Following is the body of the email template. I am sure its an issue with Godaddy server where it does not allow the image to be shared publically.
<body>
<div class="container">
<div class="row">
<div class="col-sm-2">
</div>
<div class="col-sm-8">
<img src="www.mocking.com/Images/Public/welcome.jpg" width="100%" alt="">
<br>
<br>
<div class="text-center">
<h1>Welcome to Mocking.com</h1>
<br>
</div>
<i>Please click on "Confirm Activation"</i>
<p > Some Text Some text Some Text Some Text ##PARAM1 text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text </p>
<div class="cls_btn">Activate User</div>
<div > Some Text Some text Some ##PARAM2 Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text Some Text Some text Some Text <span class="cls_link">Mocking.com </div>
</div>
<div class="col-sm-2">
</div>
</div>
</body>
</html>
Could someone help me how to setup the images public so that email link works fine?
This is my image folder setup at Godaddy.
Thanks,
PG
File permission is set here but there is nothing specific. Everything has read.
Full folder structure
This seems so simple, but I can't seem to get it to work. All I want is to apply spacing between the right side of the screen and the four wide column I have created. I have tried adding:
.spacer{
margin-right: 2%;
}
onto a containing div unsuccessfully. I have it working on my eight wide column but I can't seem to replicate it. Jfiddle: https://jsfiddle.net/fru2yv1f/
<div class="col-lg-12">
<div class="row row-top">
<div class="col-lg-8">
<div class="horizontal-spacer text-center border-green">
<div class="vert-center">
<h1 id="page-two-heading">Page two Heading</h1>
<p id="page-two-sub-heading">Information that is useful, hopefully!</p>
</div>
</div>
</div>
<div id="side-text" class="col-lg-4 hidden-md hidden-sm hidden-xs border-green">
<div class="vert-center">
<h3>This Area Will Disappear on Screen Resize</h3>
<p>text text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text text</p>
</div>
</div>
</div>
The solution was to add a class to the div with class col-lg-12 and then style the div with padding-right: 2%;
Ex.
<div class="col-lg-12 spacer">
.spacer{
padding-right: 2%;
}
Give the margin to the vert-center. Actually you are using all the 12 columns of the bootstrap grid and when you are adding margin-right to the div having col-lg-4 it is exceeding the total width of the 12 columns and hence not working properly.
example snippet
.vert-center {
margin-right: 2%;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-lg-12">
<div class="row row-top">
<div class="col-lg-8">
<div class="horizontal-spacer text-center border-green">
<div class="vert-center">
<h1 id="page-two-heading">Page two Heading</h1>
<p id="page-two-sub-heading">Information that is useful, hopefully!</p>
</div>
</div>
</div>
<div id="side-text" class="col-lg-4 hidden-md hidden-sm hidden-xs border-green">
<div class="vert-center">
<h3>This Area Will Disappear on Screen Resize</h3>
<p>text text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text texttext text text text text text text text</p>
</div>
</div>
</div>
I have a website that I'm trying to make responsive.
Some divs have to change places as mentioned in my older post: How to swap sides of 2 elements (one with float:left, the other is with float:right)
But this time it's much more complex.
This is how the page looks:
On the left div: an image.
On the right div: baner of the client, "the challange", some text, "out results", some text. "read more" link.
(right after it there is the same structure just with the image on the right and text on the left - using float on the divs).
And this is how it should look on a mobile:
First comes the banner - then the image - then the rest of the text.
This is my HTML structure:
<div class="cs">
<div class="leftDiv">
<img src="http://www.example.com/wp-content/themes/twentyfifteen-child/images/big-image.png">
</div>
<div class="rightDiv">
<a href="http://www.example.com/clients/theClientsName-case-study/">
<img src="http://www.example.com/wp-content/themes/twentyfifteen-child/images/banner.png" class="mini-logo-l">
</a>
<h1>The <span class="babyblue">Challenge</span></h1>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text . </p>
<h1>Our <span class="babyblue">Results</span></h1>
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text .</p>
<p class="read-more text-yellow">Read more</p>
</div>
</div>
As you notice, the tags are inside tags on the desktop version, which is ok.
But when looking on the page on a mobile - a lot of tags inside the "left" and "right" divs have to swap places.
Here is a jsfiddle: http://jsfiddle.net/uh8L0g4t/
Here's the fiddle for what I described in the comments. I've used !important because you are unnecessarily increasing the priority of the elements so I'm a bit lazy to clone them to gain the priority for the elements in mobile view.
.desktop{
display:block;
}
.mobile{
display:none;
}
#media screen and (max-width:600px){
.desktop{
display:none;
}
.mobile{
display:block;
}
}
And for your HTML
<div class="left">
<img class="mobile" ... />
</div>
<div class="right">
<img class="desktop" ... />
</div>
It's the most 'elegant' way for your case. If you try to move things around without cloning the image, you will end up either using more code, or high chance of breaking something else.
A portion of a site I am working on has a two-column design. I would like this to be implemented for all screen sizes, except on xs devices. On xs devices, I would like a single column design. I feel like the below approach is incorrect, as the col-span should always add up to 12 in all cases, and it is currently not the case for xs screens. On the other hand, if I change it col-xs-6, it is forcing double column designs on extra small screens, which I am trying to avoid.
What is the correct way to accomplish a single column design on extra smalls screens, while maintaining a double column design on all other screen sizes ?
This is what I tried:
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="ac-wrapper">
<div class="ac-h">
Heading 2
</div>
<p class="ac-p">
text here text here text here text here text here text here text here text her text here text here text here text here text here text here text here text here text here text here
</p>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="ac-wrapper">
<div class="ac-h">
Heading 123
</div>
<p class="ac-p">
text here text here text here text here text here text here text her text here text here text here text here text here text here text here text here text her text here text here text here text here
</p>
</div>
</div>
</div>
</div>
One solution is to toggle content visibility using http://getbootstrap.com/css/#responsive-utilities