Reputation: 313
Couldn't find an answer in previous posts. I'm using react-google-maps and in it comes with a built in way to edit the map style, and object like that
const mapStyles = {
width: '80%',
height: '70%',
marginTop : "90%",
marginLeft : "10%"
};
Which than you call inside the render function
render() {
return (
<Map
google={this.props.google}
className="oy-branch"
style={mapStyles}
zoom={12}
initialCenter={{ lat: 32.025791, lng: 34.858472 }}
>
<Marker position={{ lat: 32.022133, lng: 34.862111 }} />
</Map>
);
}
Now as I get it to make this responsive I need to use a media query in CSS, therefore I gave the "Map" element a class name ("oy-branch") and edited it in the CSS
.oy-branch {
margin-top: 10%;
width : 70% ;
height: 40%;
}
It worked for margin-top but it ain't working with width/height. What can I do?
Upvotes: 3
Views: 2069
Reputation: 11
You can add a Wrapping
width style as:
div {
position: relative;
width: 400px;
height: 400px; // May be any value
}
Upvotes: 1