Responsive website with user defined class

HTML & CSS
1

Dear All

I am using responsee Grid

the default class for full length is class=‘s-12 l-12’
and as per universal protocol s-1, s-2…s-12 and l-1, l-2 …l-12

Due to design patternwebsite snap.jpg

i have to create class like

class736x648 and storing its percentage

example

HTML Code:

<style>
.class736x648 {
  margin-left:auto;
  margin-right:auto;
 
  width:43.473124630833%;
 
  height:auto;
  margin:0.47253396337862%;
  margin-left:0.94506792675724%;
  margin-right:0px;

  float:left;
 
}
</style>

Website link
http://architectrushikesh.com/category.php?ai=1

depending upon the dimension of images but strictly in Percentage

However when I view website on mobile the s-12 part is not working
in short
the images should be listed one below the another
but displayed in squeez format

and as a result the website cannot be termed as responsive

How can I remove the classes like

class736x648 using @media

so that the page will consider only s-12
and website will be responsive

2

Couldn’t you just do a search and remove for all those class names in the html?

The only other opion I see is to reset all their css declarations to default in one giant ruleblock selecting them all and hope the specificity is only by the class. Like:


.class736x622,
.class736x648,
.class....  {
   float:none;
   position:static;
   margin:auto;
   padding:0;
   width:auto;
   height:auto;
   background:transparent;
   etc....
}
3

Sorry but I don;t have anything useful to add apart from a couple of comments which I should probably have kept to myself :slight_smile:

Any grid that has a horizontal scrollbar in the viewport from 1170px and downwards should not be touched with a barge-pole. That is a beginners mistake of the largest magnitude.:slight_smile:

.class736x648 {
  margin-left:auto;
  margin-right:auto;
 
  width:43.473124630833%;
 
  height:auto;
  margin:0.47253396337862%;
  margin-left:0.94506792675724%;
  margin-right:0px;

  float:left;
 
}

A design that uses multiple decimal places is not really workable. I have never used decimals like that in the last 15 years and never have a problem making things fit. use 2 or 3 decimals at the most or use a design technique that doesn’t rely on such magic numbers. You are also adding width:100% to elements that have margins left and right which means they can never really fit in the space allocated.

I also notice that you scale some images smaller (the two in the middle for example) but not others which means the layout gets out of sync.Is that a good design plan?

I’m not sure why you used a grid for a design that clearly doesn’t fit into a simple grid structure. You also need to think about what happens when the page is resized and how those images scale. You need to cater the design to fit in with the best behaviour of the content you are using so plan ahead and plan carefully.

It almost seems to me that you would need something like masonry to fill all those gaps properly but again that is also overkill.

Sorry, I know the above isn’t that constructive at this stage but sometimes when you paint yourself into a corner you have to step on the paint to get out :slight_smile:

3 Likes
4

Dear Sir

This is responsive website
Hence this should happen dynamically / automatically

5

So the classes should be removed automatically by media query?

Then try conditioning the reset/removal with a media query. Sorry if I was unclear. :slight_smile:

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.