Make header responsive - html

I have this responsive website. But I have a problem I have been trying to solve. The problem is that header loses style when small screens
This is part of the code
<div class="hgroup-wrap">
<div id="container-header" class="container clearfix">
<section id="site-logo" class="clearfix">
<h1 id="site-title">
<a href="http://conlami.org.mx/conlami/" title="CONLAMI" rel="home">
<img id="image-full" src="http://conlami.org.mx/conlami/wp-content/uploads/2016/09/LOGOTEXTO.png" alt="CONLAMI">
</a>
</h1>
</section>
</div>
</div>
This happens because header image is too large. Image is already responsive. But it doesn't work properly.
This wouldn't happen if for example I remove text from image and leave only logo.
I have tried text in another section but I couldn't make it work.
So. Do you have any suggestions about what can I try?

Related

How do I make a text align under a logo using css?

I am trying to make a subheading for a logo in my website. I am having trouble with aligning it under the logo. I have placed a p tag inside a div and tried to position the div but I am not sure how it works.
Here is a photo of what the website currently looks like.
below is the code for it.
HTML:
<!--logo goes here-->
<div class="logo">
<img class="img" src="photos/logo1.png" alt="the logo">
</div>
<div class="textbox">
<p class="subtext"> We care about you </p>
</div>
Put the text in the same div where the logo is:
<div class="logo">
<img class="img" src="photos/logo1.png" alt="the logo">
<p class="subtext"> We care about you </p>
</div>
Both and are block elements, by default those tags go to the new line.
So what was your intention, putting the subheading right under the logo?

Overlapping Div Sections, can't figure out why

I am trying to create a contact section at the bottom of my bootstrap website, with a col-md-3 containing a picture, and col-md-9 beside it carrying the infomation
Except when i make the window smaller the text begins to overlap the picture instead of sitting under or beside it
I have tried making the image responsive, and looking at other ways of keeping it alongside but i cant figure out the issue.
Im sure i am missing something really simple, an would greatly aapprecite any help
I have searched this website for overlapping div issues, and tried a few things but nothing seems to work
<section class="contact bg-grey" id="contact">
<div class="container">
<h2 class="contact-header">Contact Me:</h2>
<div class="row">
<div class="col-sm-3">
<img src="img/me.png" class="responsive" id="bio">
</div>
<div class="col-sm-9" id="contact_details">
<h3 class="contact-header">John Gillespie</h3>
<p>Email: johngillespiexxx#gmail.com</p>
<p>Phone: 07xxxxxxxxx</p>
<p>Twitter: #jxhngillespie</p>
</div>
</div>
</div>
</section>
I was expecting when the page size shrinks that the image would shrink with it, or that the text would stay along side, until the screen becomes too small and then fall underneath. Instead of this happening the text begins to overlap the image
If you add style="max-width: 100%" to the img, it will prevent the image from overflowing outside of its column (the 100% is relative to the width of the column). By default, images always display at their full resolution unless you constrain them in this kind of way.

stick navbar to centered image

i want to make a centered resized image+ navigation bar in a webpage with header and footer, header fixed top, footer fixed buttom, and image and the navbar, together should be resizable, respecting the aspect ration of the image (image could shrink, but never bypass original size.
the image is done, behaving as wanted!
the problem i had, i couldn't make the navigation bar stick in the bottom of the image as it's resized!
here is my code: https://codepen.io/chlegou/pen/vvYzya
<div class="popup">
<img class="image" src="https://lh5.googleusercontent.com/-h2cD5VqGNGk/U1t6QX7kY5I/AAAAAAAAFvc/46BsvAWjmSw/w640-h360-no/IMG_2061+SCR.jpg" />
<span class="content">
<span class="navbar">Navigation Bar</span>
</span>
</div>
i want the popup content stick together, with the image dynamic width. image still could shrink as it is! fix only the navbar to follow the image and stick to it.
thanks!
UPDATED the styling as you needed please check the codepen:https://codepen.io/anon/pen/ZVOoqq
<div class="outer-container">
<div class="inner-container">
<img class="image" src="https://lh5.googleusercontent.com/-h2cD5VqGNGk/U1t6QX7kY5I/AAAAAAAAFvc/46BsvAWjmSw/w640-h360-no/IMG_2061+SCR.jpg"/>
<div class="centered-content">
<span style="overflow: hidden">Navigation Bar</span>
</div>
</div>
</div>
and the for the styling of the divs please refer the codepen given above

Floating Divs in Bootstrap Grid System

I'm using the twitter bootstrap grid system for a responsive website. Most of my markup works just fine, but I've one nasty problem, which makes me mad. I've prepared a JSFiddle to let you see what happens: http://jsfiddle.net/gqb5hbza/
Here is my markup
<section>
<div class="content">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="item">
<a href="#">
<img class="adaptive-img" src="http://placehold.it/400x330" />
</a>
<div class="item-content">
<h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4>
</div>
</div>
</div>
..........
</div>
</div>
</section>
I've multiple div boxes which contains an image and a headline. These boxes are rearranged when changing the browser window. But if one of these boxes has a different height (i.e. too long headline which needs two lines), the system breaks and doesn't rearrange correctly - as you can see in the fiddle. The fourth box should be under the first box and not beneath.
Hope that somebody can help me with this problem.
As mentioned, if you want to keep your layout as-is (e.g. not explicitly defining each row), the best solution is to keep each col div the same height. You could use Bootstrap's thumbnail/caption classes to make things look a little more tidy, and then adjust the min-height values for the caption using media queries to keep the extra white space to a minimum.
<section>
<div class="content">
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="thumbnail">
<a href="#">
<img class="adaptive-img" src="http://placehold.it/400x330" />
</a>
<div class="caption">
<h4 class="h4 black">Title Title Title Title Title Title Title Title Title Title Title Title </h4>
</div>
</div>
</div>
...
</div>
</div>
</section>
Then add something similar to this css:
.caption { min-height: 275px;}
#media(min-width: 400px) {
.caption { min-height: 100px;}
}
Here's an updated fiddle with this code. Hope this helps you out.

How to make image responsive with Bootstrap?

I'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.