[Resolved] alignment issues as browser resizes to smaller screen

[Author]

Posts

[sharonb]

I am trying to: align two columns when they need to move from beside each other to underneath each other.

Can you please give me the css targets and media query to resolve the alignment issues as i reduce the size of the browser. The featured image at the top needs to be aligned with the red block "currently available for hire" and content below it.

hidden link

[Beda]

We don't provide custom development of CSS and JS, or PHP, in this Forum.

Each Website has very specific needs for these, that is why.

When you use Toolset, CSS and JS are required knowledge sets.

1. About media Queries:
- I recommend to use Bootstrap, a fully responsive framework that works out of the box with Toolset and we even deliver it with the plugins (Toolset > Settings > General > Bootstrap loading)
With this you can use native Bootstrap HTML classes:
hidden link

2. About css targets, those are always your class names or ID's.
As example if you have a DIV container with class "my-class" you would address it with this CSS target:

div.my-class {
css code here;
}

You can learn more about CSS here:
hidden link

3. Specific to your website, I see you already use Bootstrap Classes and CSS and you seem to use Layouts.
As such, no adjustment should be needed at all, as it already uses Bootstrap Style.

But you seem to have added Custom CSS as this example:

.ddl-full-width-row>[class*="col-"]:first-child {
    padding-left: 0;
}

Is this the case?
If so please remove it.

There are also settings when adding rows in Layouts, to use or not the default padding of 15px of Bootstrap, perhaps this will come in handy for you.