Homepage not responsive (Hydrogen Template)

nluk1000 · Post by **nluk1000** » Sat May 07, 2022 1:55 pm

I've recently inherited ownership of a website and am having problems undoing years of tinkering, trying to fix an issue with the home page not being responsive on a mobile device. The home page consists of the header and footer which are reformatting ok, but the main content element (which is a list of 5 'featured' articles) is not.

My website is (cloaked url): https://tiny url.com/2x66n4e8

I've some experience with using the browser inspector but I can't seem to be able to find what is causing the default bootstrap/responsive code to be over-ridden.

home-page-issue.JPG

Can anyone suggest where to look for the over-rides, or what I can do to try and fix the issue please.

I was previously registered on here since 2010 but it's been so long since I asked for help I can't access my old account as I don't use the email I registered with originally, so I had to create a new one.

Webdongle · Post by **Webdongle** » Sat May 07, 2022 4:10 pm

That link isn't working. Direct link please

nluk1000 · Post by **nluk1000** » Sat May 07, 2022 4:21 pm

https://www.928oc.org

Post by **Per Yngve Berg** » Sat May 07, 2022 5:43 pm

You have tables that are not responsive. Replace with "div" elements and a grid.

nluk1000 · Post by **nluk1000** » Sat May 07, 2022 5:48 pm

Per Yngve Berg wrote: ↑
Sat May 07, 2022 5:43 pm
You have tables that are not responsive. Replace with "div" elements and a grid.

I did that with the last table but it didn't make any difference. Also all the articles are left aligned when I am forcing them to be centered. Something is over-riding the article formatting.

Post by **Per Yngve Berg** » Sat May 07, 2022 5:56 pm

The first table with the board members have a fixed width of 750px.

nluk1000 · Post by **nluk1000** » Sat May 07, 2022 6:22 pm

Thanks Per, I will fix that but I added some DIVs on the last table in a hope that I could scroll but it made no difference - here is my table code;

Code: Select all

<html>
<h5>New and Renewed OC Members (4 wks)</h5>
	<head>
	<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 2px;
}

tr:nth-child(odd){background-color: #f2f2f2}
</style>
	</head>
					
	<body>
	<div style="overflow-x:auto;">
	<table>
	<tr>
		<th>Name</th>
		<th>OC Region</th>
		<th>Car</th>
	</tr>	
	
</table>
	</div>
	</body>
	</html>

I ended up removing some columns so it displayed better.

nluk1000 · Post by **nluk1000** » Sat May 07, 2022 6:36 pm

OK, so after a bit more work, the articles / tables are now centering on the mobile view, but when I start increasing the browser size, the majority of them all suddenly left align?

Webdongle · Post by **Webdongle** » Sat May 07, 2022 6:58 pm

@media in a css file will show the css for different widths. A user.css should override the main css file if defined last in index.php. https://www.w3schools.com/css/css3_mediaqueries_ex.asp

nluk1000 · Post by **nluk1000** » Sat May 07, 2022 7:16 pm

Webdongle wrote: ↑
Sat May 07, 2022 6:58 pm
@media in a css file will show the css for different widths. A user.css should override the main css file if defined last in index.php. https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Awesome, all sorted!
Thank you so much for the help you've given me today.
I really appreciate it!

The Joomla! Forum™

Homepage not responsive (Hydrogen Template) Topic is solved

Homepage not responsive (Hydrogen Template)

Re: Homepage not responsive (Hydrogen Template)

Re: Homepage not responsive (Hydrogen Template)

Re: Homepage not responsive (Hydrogen Template)

Re: Homepage not responsive (Hydrogen Template)

Re: Homepage not responsive (Hydrogen Template)

Re: Homepage not responsive (Hydrogen Template)

Re: Homepage not responsive (Hydrogen Template)

Re: Homepage not responsive (Hydrogen Template)

Re: Homepage not responsive (Hydrogen Template)