Forums

Bootstrap responsive menu / images

Permalink
Hello C5 users!

Concrete5.7 is really great and fun to use and the bootstrap feature is really awesome but anyway I have a few questions about the menu and the responsive images.

I enabled bootstrap in concrete5.7. It was very easy to do and well-explained by the concrete team in a youtube video.

I got stuck at the point when I wanted to add a nav block and an image.
The navigation works with bootstrap but the problem is that it has only one dropdown level. The menu button on the other hand has a dropdown whose "page" cannot be disabled and which will therefore result in a false page on Google.

The problem with the images is that they aren't responsive but I am sure someone knows a fast fix for this ;)

Link:http://swupdevelopers.nl/development/cms/index.php...
nesoor
 
digitmaster replied on at Permalink Reply
digitmaster
Hi nesoor,
you have more chances to get help if you post a link to a demo affected by the issue you describe.

regards+
digitmaster
nesoor replied on at Permalink Reply
nesoor
Hey Digitmaster,

Thanks for the advice, I immediately posted a link!
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Your "Responsive Image" has explicit height and width set and will not resize if it's containing element is resized.
<img src="/development/cms/application/files/4514/2634/3663/Untitled-3.gif" alt="Untitled-3.gif" width="825" height="58">

Adding these styles will give the image:
- a percentage width that is no wider than it's natural width (for this example, it will be no wider than 825px)
- the image will fill all available space horizontally (up to 825px)
- the image will be horizontally centered

img {
    display: block;
    width: 100% \9;
    max-width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
nesoor replied on at Permalink Reply
nesoor
Hey MrKDilkington,

The css code works great thanks! :)
digitmaster replied on at Permalink Reply
digitmaster
As I told you,
in other words:
90% of the success is "communication", 10% is technical.
Post an issue correctly an your angel will come.

cheers
digitmaster