responsive breakpoints, where to start? solved
-
-
- Designhow
- Elite Rocketeer
- Posts: 1013
- Thanks: 0
-
I was doing some custom template changes to Kiragami with the help of Henning.
www.growmyideas.com I wanted to put a graphic behind the titles that broke out of the container like a tab. So after some fussing and fixing I managed to get it to work. Now I want to add responsive break points to the image, or the css I created. I am totally new to responsive break points--how do I even begin?
div.component-content h2
{
position: relative;
min-height:72px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
background: url( www.growmyideas.com/images/growtab.png ) no-repeat -0px -0px ;
left: -73px;background-size:297px 71px;
color:#37566F;
} - Last Edit: 12 years 5 months ago by Designhow.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
@media only screen and (min-width: 1200px) { ...some rules }
@media only screen and (min-width: 960px) and (max-width: 1199px) { ...some rules }
@media only screen and (min-width: 768px) and (max-width: 959px) { ...some rules }
@media only screen and (min-width: 481px) and (max-width: 767px) { ...some rules }
@media only screen and (max-width: 480px) { ...some rules }
aslo see
www.rockettheme.com/blog/team/1551-respo...ocketthemes-solution
-
-
-
- Designhow
- Elite Rocketeer
- Posts: 1013
- Thanks: 0
-
Oh hello Henning! I wanted to start a new post rather than drag that last one off topic. Glad you are here. I am not entirely sure how to, or what would be the rules for my little title image.
Would I add them to div.component-content h2 ? this is a little abstract for me right now.
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Not sure what you want.
If you would use this code
@media only screen and (min-width: 1200px) {
div.component-content h2{
position: relative;
min-height:72px;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
background: url( www.growmyideas.com/images/growtab.png ) no-repeat -0px -0px ;
left: -73px;background-size:297px 71px;
color:#37566F;
}
}
the effect would be only in screen sizes above 1200px
-
-
-
- Pablo Rubio
- Newbie
- Posts: 8
- Thanks: 0
- How can i delete this double post?
- Last Edit: 8 years 11 months ago by Pablo Rubio.
-
-
-
- Pablo Rubio
- Newbie
- Posts: 8
- Thanks: 0
-
Hello, sorry the link u are providing as "also see" is not longer available, is anything else for help about the theme?
Henning wrote:@media only screen and (min-width: 1200px) { ...some rules }
@media only screen and (min-width: 960px) and (max-width: 1199px) { ...some rules }
@media only screen and (min-width: 768px) and (max-width: 959px) { ...some rules }
@media only screen and (min-width: 481px) and (max-width: 767px) { ...some rules }
@media only screen and (max-width: 480px) { ...some rules }
aslo see
www.rockettheme.com/blog/team/1551-respo...ocketthemes-solution
-
-
-
- Henning
- Preeminent Rocketeer
- Posts: 29362
- Thanks: 954
- Volunteer
-
Hey Juan,
please don't post in 3 year old posts.
You have a Gantry 5 template wich is totally different.
To get help with Requiem please post here.
www.rockettheme.com/forum/joomla-template-requiem
Docs for that template are here:
www.rockettheme.com/docs/joomla/templates/requiem
There is a dedicated tutorial for using breakpoints in the docs for Gantry:
docs.gantry.org/gantry5/tutorials/media-queries -
The following users have thanked you: Pablo Rubio
-
Time to create page: 0.076 seconds