News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Including a responsive row in the index.template page

Started by rcane, July 06, 2022, 01:21:56 PM

Previous topic - Next topic
Print
Go Down Pages1
User actions

rcane

July 06, 2022, 01:21:56 PM
There's a spot in the index.template page that indicates where some custom items should--right around line 478.

I'd like to inject a simple image that is responsive (the image is a link to a landing page). 

On a stand-alone page I have these style attributes that make a nice 3-row 3-column grid of images resize perfectly when on mobile devices. 

since I only need 1 row / 1 column I was hoping to just integrate this.


Code Select
<style>
  .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
 justify-content: center;
}

/* Create equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 30%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 50%;
    max-width: 30%;
  }
}


</style>
<body align="center">
   
    <div class="row">
  <div class="column">
    <a href="https://mydomain/landingpage/" target="_blank"><img src="BUTTON_landing.png"></a>
  </div> 
    </div>
</body>

rcane

#1
July 06, 2022, 01:30:45 PM
Quote from: rcane on July 06, 2022, 01:21:56 PMThere's a spot in the index.template page that indicates where some custom items should--right around line 478.

I'd like to inject a simple image that is responsive (the image is a link to a landing page). 

On a stand-alone page I have these style attributes that make a nice 3-row 3-column grid of images resize perfectly when on mobile devices. 

since I only need 1 row / 1 column I was hoping to just integrate this.


Then again, since the Theme (ant's mutant) is responsive, I suspect sizing would be reduced to just the image.


Code Select
<style>
  .row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
 justify-content: center;
}

/* Create equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 30%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 50%;
    max-width: 30%;
  }
}


</style>
<body align="center">
   
    <div class="row">
  <div class="column">
    <a href="https://mydomain/landingpage/" target="_blank"><img src="BUTTON_landing.png"></a>
  </div> 
    </div>
</body>


Kindred

#2
July 06, 2022, 02:02:16 PM
Why are you putting crap like that inline into the template?    adjustments to CSS belong in a css file...   either added into index.css or make your own for custom work and call that new CSS...

You can easily edit css files without majorly screwing up the system, even using the admin editor if needed...   mods to the template file 1- increase the chance that you screw something up and break the system and 2- increase the chance that future patches will fail automatic installation.




As for your code.... IIRC, you *ALSO* need to define the flex container
Слaва
Украинi

Please do not PM, IM or Email me with support questions.  You will get better and faster responses in the support boards.  Thank you.

"Loki is not evil, although he is certainly not a force for good. Loki is... complicated."

rcane

#3
July 06, 2022, 02:03:19 PM
Well, that's why I asked. 

Antechinus

#4
July 06, 2022, 03:01:33 PM
Lol. Don't worry about Grumpy. Yes, it is best to put custom CSS in a CSS file. Just easier to deal with that way. Chucking it on the end of index.css is usually good enough.

If you only want one linked image you don't need much in the way of CSS. There's no need for grid or flex. This should do for markup:
Code Select
<a href="https://mydomain/landingpage/" target="_blank" id="landing_button><img src="BUTTON_landing.png"></a>That's assuming you're putting it somewhere that suits the existing PHP syntax like that. Otherwise you might need:
Code Select
echo ' <a href="https://mydomain/landingpage/" target="_blank" id="landing_button><img src="BUTTON_landing.png"></a>';Would need to see the surrounding code to be sure. :)

For CSS, this should do it:
Code Select
#landing_button {
    display: block;
    width: **px  /* Where ** is the width of your button PNG. */
    max-width: 100%; /* Just for insurance. */
    margin: 1em auto.  /* If you want it centered, with a 1em gap above and below. */
}

Doug Heffernan

#5
July 06, 2022, 03:16:41 PM
Quote from: Antechinus on July 06, 2022, 03:01:33 PM
Code Select
<a href="https://mydomain/landingpage/" target="_blank" id="landing_button><img src="BUTTON_landing.png"></a>
Code Select
echo ' <a href="https://mydomain/landingpage/" target="_blank" id="landing_button><img src="BUTTON_landing.png"></a>';

Isn't the alt attribute required for the <img> tags?

Antechinus

#6
July 06, 2022, 03:20:32 PM
Oh yeah, good point. I just copied his markup but forgot that. It'll break validation if it is left out, but won't cause any other issues. Still...
Code Select
echo ' <a href="https://mydomain/landingpage/" target="_blank" id="landing_button><img src="BUTTON_landing.png" alt="Landing button"></a>';
Print
Go Up Pages1
User actions
Advertisement: